表格使用ajax请求数据导致原来绑定在表格上的样式以及点击事件失效

139 阅读 0 评论 92 点赞

我是靠谱客的博主害羞小猫咪，这篇文章主要介绍表格使用ajax请求数据导致原来绑定在表格上的样式以及点击事件失效，现在分享给大家，希望可以做个参考。

table是普通的表格

调用的js：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
window.onload = function(){
$.ajax({
type:'get',
dataType: "json",
processData: false,
url: BASE_URL +"/selectEcharts",
success: function(data){
var datastr="";
var n =1;
for(var i=0;i<data.tableData2.length;i++){
datastr+="<tr>"+
"<td>"+n+"</td>"+
"<td>"+data.tableData2[i].reportDate+"</td>"+
"<td>"+data.tableData2[i].reportDate+"</td>"+
"<td>"+data.tableData2[i].reportDate+"</td>"+
"<td>"+data.tableData2[i].reportDate+"</td>"+
"<td>"+data.tableData2[i].bsflag+"</td>"+
"</tr>";
n++;
}
$("#tableData2").html(datastr);
BindTable2Event();//这里是绑定事件
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
alert("error:"+XMLHttpRequest.status);
//
alert(XMLHttpRequest.readyState);
//
alert(textStatus);
}
});
}

jsp页面代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<table width="1300" cellpadding="0" cellspacing="0" border="0" id = "table2" >
<thead>
<tr>
<th>分公司</th>
<th>分公司</th>
<th>分公司</th>
<th>分公司</th>
<th>分公司</th>
</tr>
</thead>
<tbody id = "tableData2">
</tbody>
</table>

jsp中的JavaScript代码：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
//调用的js中绑定的事件
function BindTable2Event(){
//鼠标触碰表格行样式
$('.foottable>table>tbody tr').hover(function(){
$(this).css({'background':'#2a5f81'});
$(this).find('td').css('color','#00fff6');
$(this).find('img').attr('src','../../image/zibiao2.png');
},function(){
$(this).css({'background':''});
$(this).find('td').css('color','');
$(this).find('img').attr('src','../../image/zibiao.png');
});
//table表格行点击事件
$('#table2 tr').click(function(){
var td = $(this).find("td");// 找到td元素
var lo_id = td[3].innerHTML;// 指定需要获取元素的下标即可
alert(lo_id)
//window.location.href = "";
})
}
</script>