// 获取id为tab的table表单
var tab=document.getElementById_x_x_x_x('tab')
// 获取id为x的行号
// 在x的行号上加一作为插入行的行号
var n=document.getElementById_x_x_x_x('x').rowIndex+1
// tr为tab表单下行号为n的行
var tr=tab.insertRow(n)
// insertCell() 方法用于在 HTML 表的一行的指定位置插入一个空的
// td为插入的行的第一个td元素
var td=tr.insertCell(0)
// 像刚才所获取的td中插入一个随机数值
td.innerHTML='new '+Math.random()
}
<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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）