我动态的生成一个表格代码如下：
这样动态可以实现点击其中的一行响应selectRows事件，但是我如果删去中间的一行，怎么能够把他的 selectRows事件也改变了呢？高手请指教一下
var table = document.getElementById("tzConditionTable");//取得table
var oTBody = document.getElementById("tzConditionTBody")
var oTr = document.createElement("tr");
var oTr = document.createElement("tr");
if(index != 1)
{
index = oTBody.rows.length +1;
}
if (window.attachEvent)
{
//IE 的事件代码
oTr.attachEvent("onclick", function(){selectRow(index-1)});
}
else
{
//其它浏览器的事件代码
oTr.addEventListener("click",function(){selectRow(index-1)},false);
} / 中间td部分省略
oTr.appendChild(oTd);
oTBody.appendChild(oTr);
if(tbodyFlg == false)
{
table.appendChild(oTBody);
}
这样动态可以实现点击其中的一行响应selectRows事件，但是我如果删去中间的一行，怎么能够把他的 selectRows事件也改变了呢？高手请指教一下
var table = document.getElementById("tzConditionTable");//取得table
var oTBody = document.getElementById("tzConditionTBody")
var oTr = document.createElement("tr");
var oTr = document.createElement("tr");
if(index != 1)
{
index = oTBody.rows.length +1;
}
if (window.attachEvent)
{
//IE 的事件代码
oTr.attachEvent("onclick", function(){selectRow(index-1)});
}
else
{
//其它浏览器的事件代码
oTr.addEventListener("click",function(){selectRow(index-1)},false);
} / 中间td部分省略
oTr.appendChild(oTd);
oTBody.appendChild(oTr);
if(tbodyFlg == false)
{
table.appendChild(oTBody);
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
table {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif
}
td {
text-align: center;
background: #FFF
}
tr {
height: 20px;
}
th {
background: #9DACBF;
color: #FFF;
height: 20px;
line-height: 20px
}
a {
color: #99C;
}
a:hover {
color: #F93
}
.input td {
padding: 2px
}
.input input {
width: 100%;
border: 1px solid #000;
overflow: hidden
}
</style>
<script type="text/javascript">
//简化document.getElementById()方法
function $(obj) {
return document.getElementById(obj);
}
//插入行
function insRow() {
var targetTable = $("nw");
var lastRow = getTBody(targetTable).appendChild(targetTable.rows[1].cloneNode(true)); //插入行方法
clearTextBox(lastRow);
var newCell3 = lastRow.cells[2];
newCell3.innerHTML = '<a href="#">删除</a>';
newCell3.onclick = delRow;
}
//删除行
function delRow() {
var targetTable = $("nw");
targetTable.deleteRow(this.parentNode.rowIndex);
}
function getTBody(table) {
for (var i=0; i<table.childNodes.length; i++) {
if (table.childNodes[i].nodeType == 1
&& table.childNodes[i].tagName.toLowerCase()=="tbody")
return table.childNodes[i];
}
}
function clearTextBox(target) {
var allInputs = target.getElementsByTagName("input");
var ipt;
for (var i=0; i<allInputs.length; i++) {
ipt = allInputs[i];
if (ipt.type.toLowerCase()=="text") {
ipt.value = "";
}
}
}
</script>
<title>Javascript控制表格 实现动态添加和删除表格内容</title>
</head>
<body>
<table id="nw" cellpadding="0" cellspacing="1" border="0" width="320" bgcolor="#CCCC99">
<th>编号</th>
<th>名称</th>
<th>操作</th>
<tr class="input">
<td><input type="text" id="name" /></td>
<td><input type="text" id="add" /></td>
<td style="width: 52px"><input type="button" value="添 加" class="btn" onClick="insRow()" /></td>
</tr>
</table>
</body>
</html>
{
//IE 的事件代码
oTr.attachEvent("onclick", function(){selectRow(index-1)});
}
else
{
//其它浏览器的事件代码
oTr.addEventListener("click",function(){selectRow(index-1)},false);
}
上面的这个方法注册时可以累加的，所以以前注册的点击也还在。
把这段直接改为：
oTr.onclick = function(){selectRow(index-1)};
因为创建时分配的INDEX，在删除中间的行数后，与实际的INDEX不符，造成混乱了，是吧。
这个，建议还是去修改selectRow函数吧，在它里面动态去获取当前行的实际索引。
具体方法是创建TD时（点击得到的源事件对象其实是TD），给它按这类方式赋予id属性:
oTd.id="r1c1"或"r1c2","r2c1"等。这只起标识作用，不代表实际的行列。
对oTr.attachEvent("onclick", function(){selectRow(index-1)});
改为
oTr.attachEvent("onclick", function(){selectRow(event.srcElement.id)});
对
oTr.addEventListener("click",function(){selectRow(index-1)},false);
改为
oTr.addEventListener("click",function(){selectRow(event.target.id)},false);//这个有点记不很清楚了，如果不对就自己查一下
然后在selectRow函数体里，根据传进来的事件源对象（即TD）的ID取得TD对象，再取其父对象，就得到TR对象，对其设置样式（不知这是否就是你这个函数的作用），或者其它操作即可。
不必设置ID了。
添加事件的地方这样写：
oTr.attachEvent("onclick", function(){selectRow(event.srcElement)});selectRow函数里得到的参数就是点击的TD对象，对其取父元素就是TD所在的行TR对象。