js清空table，

2012-10-26

js清空table，急！在线等！图片：代码：Java code%@ page languagejava contentTypetext/html charsetU

js清空table，急！在线等！
图片：
代码：

Java code

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><html><head><script type="text/javascript">function contactlist(){        var table = document.getElementById("contactTable");        var tr = table.insertRow(table.rows.length);//添加一行        tr.align="center";        tr.bgcolor="#F3F4F3";        tr.height="23";        //添加五列        var td0 = tr.insertCell(0);        td0.width="20%";        var td1 = tr.insertCell(1);        td1.width="20%";        var td2 = tr.insertCell(2);        td2.width="8%";        var td3 = tr.insertCell(3);        td3.width="30%";        var td4 = tr.insertCell(4);        td4.width="20%";                //设置列内容        td0.innerHTML = "";        td1.innerHTML = "<input type='file' id='dataAudio' name='dataAudio'/><input type='hidden' name='dataAudios'/><input type='hidden' name='audioOldName'/>";        td2.innerHTML = "<input type='text' name='playDateTime' id='playDateTime' onkeyup='validateNumber(this);' size='5' maxlength='3' style='color: red' />";        td3.innerHTML = "<input type='text' name='content' id='content' size='35' maxlength='300'/>";        td4.innerHTML = "<input type='button' value='删除' onclick='removeRow(this.parentNode.parentNode)'/>";            }function removeRow(r){    var root = r.parentNode;    var allRows = root.getElementsByTagName('tr');    if(allRows.length > 3){        root.removeChild(r);    }else{        alert("不能删除改行！");    }}</script ></head><body><table id="contactTable" width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#D9D9D9">         <tr bgcolor="#F3F4F3" align="center" height="23">           <td colspan="5" align="left"><input type="button" value="添加帧" class="button" onclick="return contactlist();"/></td>        </tr>        <tr bgcolor="#F3F4F3" align="center" height="23">           <td width="20%">上传图片</td>           <td width="20%">上传声音</td>           <td width="8%">播放时间</td>           <td width="30%">内    容</td>           <td width="20%">操作</td>        </tr>    </table></body></html>

问题：现在点击每行的删除按钮可以一行一行的删除，我想要的是点击一个按钮清空table（即一下把那三行都删除，单表头要留着，当然也可能n行）

[解决办法]

HTML code

<html><head><script type="text/javascript">function contactlist(){        var table = document.getElementById("contactTable");        var tr = table.insertRow(table.rows.length);//添加一行        tr.align="center";        tr.bgcolor="#F3F4F3";        tr.height="23";        //添加五列        var td0 = tr.insertCell(0);        td0.width="20%";        var td1 = tr.insertCell(1);        td1.width="20%";        var td2 = tr.insertCell(2);        td2.width="8%";        var td3 = tr.insertCell(3);        td3.width="30%";        var td4 = tr.insertCell(4);        td4.width="20%";                //设置列内容        td0.innerHTML = "";        td1.innerHTML = "<input type='file' id='dataAudio' name='dataAudio'/><input type='hidden' name='dataAudios'/><input type='hidden' name='audioOldName'/>";        td2.innerHTML = "<input type='text' name='playDateTime' id='playDateTime' onkeyup='validateNumber(this);' size='5' maxlength='3' style='color: red' />";        td3.innerHTML = "<input type='text' name='content' id='content' size='35' maxlength='300'/>";        td4.innerHTML = "<input type='button' value='删除' onclick='removeRow(this.parentNode.parentNode)'/>";            }function removeRow(r){    var root = r.parentNode;    var allRows = root.getElementsByTagName('tr');    if(allRows.length > 3){        root.removeChild(r);    }else{        alert("不能删除改行！");    }}function deleteAll() {    var table = document.getElementById("contactTable");    var tableLength = table.rows.length;    for(var int = 2;int < tableLength;int++) {        table.deleteRow(2);    }    }</script ></head><body><table id="contactTable" width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#D9D9D9">         <tr bgcolor="#F3F4F3" align="center" height="23">           <td colspan="5" align="left"><input type="button" value="添加帧" class="button" onclick="return contactlist();"/></td>           <input type="button" value="删除全部" class="button" onclick="deleteAll();"/>        </tr>        <tr bgcolor="#F3F4F3" align="center" height="23">           <td width="20%">上传图片</td>           <td width="20%">上传声音</td>           <td width="8%">播放时间</td>           <td width="30%">内    容</td>           <td width="20%">操作</td>        </tr>    </table></body></html> 
 
[解决办法]
我觉得你直接可以删除表然后再添加一个新的表和表头还要快些。。比你循环好吧
[解决办法]
表头和下面内容分开呗，将你要删的内容全部放在一个tbody里面，然后直接清空这个tbody
[解决办法]
同意楼上
[解决办法]
function deleteAll() {
   var table = document.getElementById("contactTable");
   var tableLength = table.rows.length;
   for(var int = 2;int < tableLength;int++) {
       table.deleteRow(2);
   }
  
}

这样不行吗。。

当然，也赞成另外两位仁兄的做法，另外再弄个元素出来，就不用搞什么循环了
[解决办法]
为什么不用JQuery来弄???

热点排行

Java Web开发

js清空table，