Web-ajax动态添加标签,事件委托中获取自定义标签值
首先是html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" >
<table>
<tr>
<td>日期</td>
<td>标题</td>
<td>天气</td>
</tr>
<tbody id="Diary">
<tr>
<td> 9月10日</td>
<td>今天是宝贝的生日 <a href="#">[删除]</a></td>
<td>晴</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
ajax动态添加标签
<script src="../js/jquery-1.7.1.min.js"></script>
<script>
$(()=>{
updateWay();
//更新数据方法
function updateWay() {
$.ajax({
type:"post",//访问方式
url:"../show" ,//访问地址
dataType:"json",//返回数据类型
success:function (data) {//回调函数
let contenr="";
// 将data中的petDiaryList进行遍历
$.each(data.petDiaryList,(i,obj)=>{
//动态拼接日志内容
contenr +=`<tr id="operate" >
//这里由于我日志实体类中的时间用的是LocalDateTime,所以获得年份是以obj.date.date.year
//同理月份也是obj.date.date.month
<td>${obj.date.date.year+"年"+obj.date.date.month+"月"+obj.date.date.day+"日"}</td>
<td>${obj.title}
//由于删除和修改时需要获得对应的id,,这里就自定义了一个标签来放该条日志的id,
<button class="btn btn-primary" content="${obj.id}" type="button" id="del" >删除</button>
<button class="btn btn-primary" content="${obj.id}" type="button" id="update" >修改</button>
</td>
<td>${obj.weather}</td>
</tr>`;
});
//将拼接的内容写入网页中
$("#Diary").html(contenr);
}
})
}
事件委托中获取自定义标签值
接上面代码
//事件委托,获得自定义标签值
// 方式一、通过事件源获得 这里的方法参数中记得写事件源(e)
$("#Diary").on("click","#del",function (e) {
//每次删除前都需确认是否删除
let isDelete = window.confirm("确认删除?");
if(isDelete == false){
return;
}
$.ajax({
type:"../delete",
// 传递参数时通过 e(事件源).target(目标).attr(属性)("自定义标签名")来获得自定义标签的值
data:{"id":$(e.target).attr("content")},
dataType:"test",
success:function (data) {
if(data == 1){
alert("成功删除日志")
}else{
alert("日志删除失败")
}
}
})
});
// 方式二、通过this点attr(自定义标签名)
$("#Diary").on("click","#update",function(){
//跳转页面进行修改业务,
window.location.href= "updateDiary.html?id="+$(this).attr("content");
});
})
</script>