利用AJAX生成自动添加tr的table,并且为添加的tr附加上方法

首先确保有一个table:

<table id="table">
</table>

然后获取table和他的长度:

var table = document.getElementById("table");
var tableLength = table.rows.length;


做一个来自后台的list的循环:

for (var i = 0;i < data.viewList.length;i++ ){
    //loop
}

添加tr,tr的class以及tr的function

//row数
var cnt = i + tableLength;

//生成
var row = table.insertRow(cnt);

//class
row.className = "sTable";

//方法
row.onclick = function(e){
    colorChange(row);
};

//添加td
var cell0 = row.insertCell(0);
cell0.id = "td01";
cell0.innerHTML = data.viewList[i].slgtim;

var cell1 = row.insertCell(1);
cell1.id = "td02";
cell1.innerHTML = data.viewList[i].slgkid;

var cell2 = row.insertCell(2);
cell2.id = "td03";
cell2.innerHTML = data.viewList[i].svckid;

 重点在于添加方法的代码,这个方式确实可以添加,但是实际运行之后无论点击哪一条tr始终是最后一条tr调用colorChange()。 

在添加onclick方法的时候,row作为colorChange(obj)的参数传入,但是方法并没有被实际加载,传入的row或者说colorChange方法的obj依然是一个循环内的可变参数,所以obj一直是循环最后的row对象,因此onclick方法的添加应该改成这样,以获取当前row对象

row.onclick = function(e){
    colorChange($(this));
};



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值