javascript给html的表格添加行，并且每行添加一个onclick事件。要求点击不同行要传递当前行号给某函数
代码如下：for(i=1;i<=20;i++){Tr=Tab_Main.insertRow();Td=Tr.insertCell();Td.onclick=functio...
代码如下：
for (i=1;i<=20;i++) {
Tr=Tab_Main.insertRow();
Td=Tr.insertCell();
Td.onclick=function() {
alert(i);
}
}
现在问题是点击每一行弹出的都是21 展开
for (i=1;i<=20;i++) {
Tr=Tab_Main.insertRow();
Td=Tr.insertCell();
Td.onclick=function() {
alert(i);
}
}
现在问题是点击每一行弹出的都是21 展开
4个回答
展开全部
<html>
<head>
<title>添加行</title>
<script type="text/javascript">
function addRow() {
var tb = document.getElementById("tb");
var length = tb.rows.length;//该表格的总行数
var row = tb.insertRow(length);//在行末尾添加一行
row.ondblclick = function () { altRowNum1(row); } //为行添加双击事件
var c1 = row.insertCell(0);//添加单元格
c1.innerHTML = length + 1;
var c2 = row.insertCell(1);
c2.innerHTML = '<input type="text" />';
var c3 = row.insertCell(2);
c3.innerHTML = '<input type="button" onclick="altRowNum2(this)" value="当前行"/>';
}
function altRowNum1(row) {
var rowIndex = row.rowIndex;//行号
alert("行双击，这是第 " + (rowIndex + 1) + " 行，行下标为 " + rowIndex);
}
function altRowNum2(btn) {
var rowIndex = btn.parentNode.parentNode.rowIndex; //btn的父节点为单元格，单元格的父节点当前行
alert("单元格按钮单击，这是第 " + (rowIndex + 1) + " 行，行下标为 " + rowIndex);
}
</script>
</head>
<body>
<input type="button" value="添加" onclick="addRow()"/><br/>
<table id="tb" width="200px" border="1px" >
<tr ondblclick="altRowNum1(this)"><td>1</td><td><input type="text" value="60"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>2</td><td><input type="text" value="67"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>3</td><td><input type="text" value="59"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>4</td><td><input type="text" value="70"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>5</td><td><input type="text" value="80"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>6</td><td><input type="text" value="90"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>7</td><td><input type="text" value="hh"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>8</td><td><input type="text" value="98"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>9</td><td><input type="text" value="99"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>10</td><td><input type="text" value="100"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
</table>
<div id="resultDiv">
</div>
</body>
</html>
<head>
<title>添加行</title>
<script type="text/javascript">
function addRow() {
var tb = document.getElementById("tb");
var length = tb.rows.length;//该表格的总行数
var row = tb.insertRow(length);//在行末尾添加一行
row.ondblclick = function () { altRowNum1(row); } //为行添加双击事件
var c1 = row.insertCell(0);//添加单元格
c1.innerHTML = length + 1;
var c2 = row.insertCell(1);
c2.innerHTML = '<input type="text" />';
var c3 = row.insertCell(2);
c3.innerHTML = '<input type="button" onclick="altRowNum2(this)" value="当前行"/>';
}
function altRowNum1(row) {
var rowIndex = row.rowIndex;//行号
alert("行双击，这是第 " + (rowIndex + 1) + " 行，行下标为 " + rowIndex);
}
function altRowNum2(btn) {
var rowIndex = btn.parentNode.parentNode.rowIndex; //btn的父节点为单元格，单元格的父节点当前行
alert("单元格按钮单击，这是第 " + (rowIndex + 1) + " 行，行下标为 " + rowIndex);
}
</script>
</head>
<body>
<input type="button" value="添加" onclick="addRow()"/><br/>
<table id="tb" width="200px" border="1px" >
<tr ondblclick="altRowNum1(this)"><td>1</td><td><input type="text" value="60"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>2</td><td><input type="text" value="67"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>3</td><td><input type="text" value="59"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>4</td><td><input type="text" value="70"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>5</td><td><input type="text" value="80"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>6</td><td><input type="text" value="90"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>7</td><td><input type="text" value="hh"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>8</td><td><input type="text" value="98"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>9</td><td><input type="text" value="99"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
<tr ondblclick="altRowNum1(this)"><td>10</td><td><input type="text" value="100"/></td><td><input type="button" onclick="altRowNum2(this)" value="当前行"/></td></tr>
</table>
<div id="resultDiv">
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你的i是全局的变量，当页面渲染完成以后，i = 21 ,在执行alert(i) 肯定会输出 21
最好是给Td加上ID ，然后在onclick是打印该行的ID就好了，不要用 i 。
例如：
for (var i = 1; i <= 20; i++) {
Tr = Tab_Main.insertRow();
Td = Tr.insertCell();
Td.id = i;
Td.onclick = function (Td) {
alert(Td.id);
}
}
最好是给Td加上ID ，然后在onclick是打印该行的ID就好了，不要用 i 。
例如：
for (var i = 1; i <= 20; i++) {
Tr = Tab_Main.insertRow();
Td = Tr.insertCell();
Td.id = i;
Td.onclick = function (Td) {
alert(Td.id);
}
}
追问
Td.id = i;
Td.onclick = function (Td) {
alert(Td.id);
点击时弹出未定义，undefined
追答
不好意思，写错了，下面的没问题了
for (var i = 1; i
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把
alert(i);
改成
alert(this.cellIndex);
因为你的变量 i 只有一个,那么值也就只有一个, 当循环完成以后 i 的值就是21, 所以当你这时再取 i 的值,都是21.
alert(i);
改成
alert(this.cellIndex);
因为你的变量 i 只有一个,那么值也就只有一个, 当循环完成以后 i 的值就是21, 所以当你这时再取 i 的值,都是21.
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用闭包多好啊，JS的高级应用：
for (i=1;i<=20;i++) {
(function(_i) {
Tr=Tab_Main.insertRow();
Td=Tr.insertCell();
Td.onclick=function() {
alert(_i);
}
})(i);
}
for (i=1;i<=20;i++) {
(function(_i) {
Tr=Tab_Main.insertRow();
Td=Tr.insertCell();
Td.onclick=function() {
alert(_i);
}
})(i);
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
