动态添加 td tr 表格 javascript

最新推荐文章于 2024-11-12 10:54:49 发布

iteye_14998

最新推荐文章于 2024-11-12 10:54:49 发布

阅读量192

点赞数

分类专栏： HTML表格的动态添加行和删除行文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/iteye_14998/article/details/82170505

版权

HTML表格的动态添加行和删除行专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml" >
<head></head>

<script language="javascript">
function add()
{
var myTable = document.getElementById("aa");
var newRow = aa.insertRow(aa.rows.length);
var newTd1 = newRow.insertCell(0);
newTd1.innerText="lala";
var newTd2 = newRow.insertCell(1);
newTd2.innerText="^_^";
}
</script>
<body>
<form>
<input type="button" οnclick="addline()" value="增加一行">
<table border="1" id="test">
<tr>
<td colspan="2"><input type="text" name="tt[]"></td>
</tr>
</table>
<input type="submit">
</form>
<script>
function addline(content){
newline=document.all.test.insertRow();
newline.insertCell().innerHTML='<input type="text" name="tt[]"><input type="button" value="删除此行" οnclick="del()">'

}
function del(){
document.all.test.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
}
</script>
<input type="button" value="点我啊" οnclick="add();">
<table id="aa" border="1" bordercolor="black" style="border-collapse: collapse" width="80%">
<tr>
<td width="50%">xixi</td>
<td width="50%">haha</td>
</tr>
</table>

</body>
</html>