javascript给html的表格添加行，并且每行添加一个onclick事件。要求点击不同行要传递当前行号给某函数_IT百科

<html>

<head>

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>

</table>

</div>

</body>

</html>

window.onload = function () {

const params = document.getElementById('params')

const ul = params.querySelector('ul')

const addBtn = ul.querySelector('#add')

addBtn.onclick = function (e) {

const newli = document.createElement('li')

newli.appendChild(document.createElement('input'))

const btn = document.createElement('input')

btn.setAttribute('type', 'button')

btn.setAttribute('value', '删除')

btn.setAttribute('opt-type', 'del')

newli.appendChild(btn)

ul.appendChild(newli)

}

ul.onclick = function (e) {

const target = e.target

const optType = target.getAttribute('opt-type')

if (target.nodeName === 'INPUT' && target.type === 'button' && optType === 'del') {

this.removeChild(target.parentNode)

}

} <div id="params">

<ul>

</ul>

</div>

点击"添加一行"，生成一条li，包含input，然后append进ul里边。点击删除，用ul删除按钮父元素li。

添加节点append；移除节点removeChild；移动节点：var sdds=document.getElementById；创建节点createTextNode()；查找节点：document.getElementsByTagName。

其他方法：

创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

添加、移除、替换、插入

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

查找

getElementsByTagName() //通过标签名

称

getElementsByName() //通过元素的Name属性的值

getElementById() //通过元素Id，唯一性

实现一个函数clone，可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11545920.html

javascript给html的表格添加行，并且每行添加一个onclick事件。要求点击不同行要传递当前行号给某函数

发表评论

评论列表（0条）