JS 动态添加、删除表格的行

最新推荐文章于 2022-08-22 08:33:46 发布

robbb

最新推荐文章于 2022-08-22 08:33:46 发布

阅读量418

点赞数

文章标签： javascript table 行数据

本文链接：https://blog.csdn.net/robbb/article/details/59056711

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Test Document</title>
</head>
<body>
	<input type="button" value="添加"  οnclick="addRow('tab')"/>
	<table width="350" height="36" border="1" id="tab">
	    <tr>
	        <th width="64" height="30" scope="col">姓名</th>
	        <th width="204" scope="col">地址</th>
	        <th width="60" scope="col">操作</th>
	    </tr>
	</table>
</body>
</html>
 <script type="text/JavaScript">
    //取得指定id的对象
    function getObj(id){
        return document.getElementById(id);
    }
    //添加行函数
    function addRow(tabName){
        //取得table的对象
        var tab=getObj(tabName);
        //添加行
        var row=tab.insertRow(tab.rows.length);
        //添加三列
        var nameCell=row.insertCell(row.cells.length);
        var addressCell=row.insertCell(row.cells.length);
        var buttonCell=row.insertCell(row.cells.length);
        //给name输入栏和address输入栏赋值
        nameCell.innerHTML="张三";
        addressCell.innerHTML="北京";
        //在第三列加上删除当前列按钮        

        buttonCell.innerHTML='<input value="删除"type="button"οnclick="deleteRow(this)"/>';
    }
    //删除列函数，删除方法传入参数为行的索引
    function deleteRow(obj){
        var row=obj.parentNode.parentNode;
        var tab=row.parentNode;
        tab.deleteRow(row.rowIndex);
    }
</script>

robbb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 动态添加、删除表格的行

Test Document 姓名地址操作 //取得指定id的对象 function getObj(id){ return document.getElementById(id); } //添加行函数 function addRow(tab
复制链接

扫一扫