js 表格的每一行都有一个按钮 点击按钮修改当前行某一列的信息

JavaScript013

js 表格的每一行都有一个按钮 点击按钮修改当前行某一列的信息,第1张

1、首先开始新建html文件。

2、然后创建一个三行三列的表格。

3、接下来开始创建js函数。

4、接下来开始进行定义变量获取行。

5、然后就将函数加在按钮上。

6、就可以看到预览效果如图。

7、最后点击第二个按钮删除 第二行。

比如,这个表格设置ID为:box    那么:

var biao = document.getElementById('box')  //获取到这个表并且用变量记住它 var hang = biao.getElementTagName('tr')[0]     //利用上面获取到的表  获取第一行

var lie = hang.getElementTagName('hd')[0]     //利用上面获取到的行来获取第一行的第一列

alert(lie[0].innerHTML)     第一行的第一列 的内容

拿走,不谢,表格本来是空的

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>js</title>

<style type="text/css">

</style>

<script>

window.onload=function(){

var str=''

var x=document.getElementById('s')

for(var i=1i<4i++){

str+='<tr>'

for(var j=1j<3j++){

str+='<td>这是第'+i+'行,第'+j+'列</td>'

}

str+='<td><button>点我</button></td></tr>'

}

s.innerHTML=str

var b=document.getElementsByTagName('button')

for(var i=0i<b.lengthi++){

b[i].onclick=function(){

alert(this.parentNode.parentNode.innerText)

}

}

}

</script>

</head>

<body>

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

</body>

</html>