JS实现删除表格所有行

项目需求，需要对页面不同的表格进行不同的清除 *** 作。

实现如下：

1删除表格内所有数据

2删除表格内的数据保留表头

完、、、、

<tablewidth="600"border="1"cellspacing="0">

<thead>

<tr>

<th>编号</th>

<th>姓名</th>

<th>职位</th>

<th> *** 作</th>

</tr>

</thead>

<tbodyid="tbMain"></tbody>

</table>

<scripttype="text/javascript">

//模拟一段JSON数据，实际要从数据库中读取

varper=[

{id:001,name:'张珊',job:'学生'},

{id:002,name:'李斯',job:'教师'},

{id:003,name:'王武',job:'经理'}

];

windowonload=function(){

vartbody=documentgetElementById('tbMain');

for(vari=0;i<perlength;i++){//遍历一下json数据

vartrow=getDataRow(per[i]);//定义一个方法,返回tr数据

tbodyappendChild(trow);

}

}

functiongetDataRow(h){

varrow=documentcreateElement('tr');//创建行

varidCell=documentcreateElement('td');//创建第一列id

idCellinnerHTML=hid;//填充数据

rowappendChild(idCell);//加入行，下面类似

varnameCell=documentcreateElement('td');//创建第二列name

nameCellinnerHTML=hname;

rowappendChild(nameCell);

varjobCell=documentcreateElement('td');//创建第三列job

jobCellinnerHTML=hjob;

rowappendChild(jobCell);

//到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮

vardelCell=documentcreateElement('td');//创建第四列， *** 作列

rowappendChild(delCell);

varbtnDel=documentcreateElement('input');//创建一个input控件

btnDelsetAttribute('type','button');//type="button"

btnDelsetAttribute('value','删除');

//删除 *** 作

btnDelοnclick=function(){

if(confirm("确定删除这一行嘛？")){

//找到按钮所在行的节点，然后删掉这一行

thisparentNodeparentNodeparentNoderemoveChild(thisparentNodeparentNode);

//btnDel-td-tr-tbody-删除(tr)

//刷新网页还原。实际 *** 作中，还要删除数据库中数据，实现真正删除

}

}

delCellappendChild(btnDel);//把删除按钮加入td，别忘了

returnrow;//返回tr数据

}

</script>

扩展资料

js动态创建表格

vartab=documentcreateElement("table");

tabborder="1px";

documentbodyappendChild(tab);

for(vari=0;i<3;i++){

vartr=documentcreateElement("tr");

for(varj=0;j<3;j++){

vartd=documentcreateElement("td");

tdinnerHTML=Mathround(Mathrandom()9);

trappendChild(td);

}

tabappendChild(tr);

vardel=documentcreateElement("td");

delinnerHTML="删除";

trappendChild(del);

delonclick=function(){

thisparentNoderemove();

}

}

你在动态添加每一行的时候应该给此行 tr 添加一个 class，例如 <tr class="data"> 说明此行为数据，这样在 *** 作的时候会方便很多，不会影响其它 tr，例如标题栏（条形码、商品编码）。

<script type="text/javascript">

windowonload = function() {

    // 这里的 add 要对应你添加单据按钮的 id

    documentgetElementById("add")onclick = function() {

        // 这里的 table 要对应你表单的 id

        var table = documentgetElementById("table"),

            data_rows = tablegetElementsByTagName("tr");

        for(var i = data_rowslength - 1; i >= 0; i--) {

            // 这里的 data 要对应数据行的 class

            if(data_rows[i]classNameindexOf("data") > -1) {

                var cells = data_rows[i]getElementsByTagName("td");

                // 只检查前面 9 个 td，忽略备注和 *** 作

                for(var a = 0; a < 9; a++) {

                    // 无内容

                    if(cells[a]innerHTML === "") {

                        // 删除此行

                        tabledeleteRow(i);

                        break;

                    }

                }

            }

        }

    

        // tr 删除完毕，继续其它工作

        //

    };

};

</script>

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml，编写基础代码。

2、在indexhtml中的<script>标签，输入js代码：$('table tr')eq(1)remove();$('table tr')eq(1)remove();。

3、浏览器运行indexhtml页面，此时发现表格的最后2行都被js删除了。

jQuery 遍历的 eq() 方法将匹配元素集缩减值指定 index 上的一个，index表示元素的位置（最小为 0）。所以获取Table第 i 行第 j 列的内容可用如下代码

$("table")find("tr")eq(i-1)find("td")eq(j-1)text(); // 注意-1是因为index从0开始计数。

<div class="box"><span>填写行列数，点击按钮后获取对应位置的数值：</span><div class="content"><table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table></div>       

第<input type="text" name="row">行，第<input type="text" name="col">列<input type="button" class="btn" value="确定"></div>

添加css样式

divbox{width:300px;height:250px;padding:10px 20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}

input[type='text']{width:35px;height:30px;border:1px solid #99ccff;}

input[type='button']{width:100px;height:30px;margin:10px;border:2px solid #ebbcbe;}

selected{background:#99ccff;}

table{border-collapse:collapse;}

td{padding:5px 10px;border:1px solid green;}。