js清空table，急！在线等！

H_Gragon 2012-10-16 04:15:24
图片：
代码：


<%@ 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行）
...全文
1444 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
叶孤音 2014-04-21
  • 打赏
  • 举报
 回复
<table > <thead> <tr> <th align="center" width="60px" style="border: 1px solid #cdcdcd;">XXXX</th> <th align="center" width="60px" style="border: 1px solid #cdcdcd;">XXXX</th> ... </tr> </thead> <tbody id="contextObj"></tbody> </table> js: $("#contextObj tr").remove();
H_Gragon 2012-10-17
  • 打赏
  • 举报
 回复 1
[Quote=引用 7 楼 的回复:]
function deleteAll() {
var table = document.getElementById("contactTable");
var tableLength = table.rows.length;
for(var int = 2;int < tableLength;int++) {
table.deleteRow(2);
}

}……
[/Quote]
谢谢这位哥们，你的方法ok，我结贴了啊~
no_fengzi 2012-10-17
  • 打赏
  • 举报
 回复
为什么不用JQuery来弄???
夕阳下的奔跑~~ 2012-10-17
  • 打赏
  • 举报
 回复
function deleteAll() {
var table = document.getElementById("contactTable");
var tableLength = table.rows.length;
for(var int = 2;int < tableLength;int++) {
table.deleteRow(2);
}

}

这样不行吗。。

当然，也赞成另外两位仁兄的做法，另外再弄个元素出来，就不用搞什么循环了
H_Gragon 2012-10-17
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 的回复:]
HTML code


<html>
<head>
<script type="text/javascript">
function contactlist(){
var table = document.getElementById("contactTable");
var tr = table.insertRow(table.rows.lengt……
[/Quote]
循环删除不行，总是删除不干净，总是先删除奇数行，不知道为什么？那位高手给解决一下啊
hellobbboy 2012-10-16
  • 打赏
  • 举报
 回复
同意楼上
zh919919 2012-10-16
  • 打赏
  • 举报
 回复
表头和下面内容分开呗，将你要删的内容全部放在一个tbody里面，然后直接清空这个tbody
吉他猪 2012-10-16
  • 打赏
  • 举报
 回复
我觉得你直接可以删除表然后再添加一个新的表和表头还要快些。。比你循环好吧
夕阳下的奔跑~~ 2012-10-16
  • 打赏
  • 举报
 回复 




<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>


循环一下倒是可以
H_Gragon 2012-10-16
  • 打赏
  • 举报
 回复
上面图片可能看不到后面，这是后面的图片：
javascript清空table表格的方法
本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下： 1. 通常方法 循环table的rows，然后一个一个删除。 这个方法是通常的方法，可行，但是效率不好。 2. 另一个方法 var artTable = document.getElementById("artical_table"); console.debug(artTable.getElementsByTagName("thead")[0]); var artBody=artTable.tBodies[0]; //clear table //artBody[removed]=''; //获取
js实现table添加行tr、删除行tr、清空行tr的简单实例
下面小编就为大家带来一篇js实现table添加行tr、删除行tr、清空行tr的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript清理table样式
本文给大家讲解的是使用javascript实现去除多余的TABLE的样式，主要通过结合正则表达式来实现，非常的简单实用，有需要的小伙伴可以参考下。
纯原生js实现table表格的增删
公司实习生问我table的增删操作，用jQuery很简单的实现了。又问我不使用jQuery，只使用js如何实现。 面对这种情况，我的一贯做法是‘不理解，但是支持’。 jQuery用的多了，人也懒了，但还是用js实现了这一操作，觉得难点在于IE兼容。。。 只是想找代码看看的可以跳过分析过程，文章底部附有完整代码。 以下是coding过程： HTML结构代码 一个基本的table结构，增加了一些简单的样式，三个按钮分别对应创建、清空，和一个预留。 <!DOCTYPE HTML> <html> <head> <title>table</title> <meta charset='utf-8'
JS动态创建Table,Tr,Td并赋值的具体实现
成果库修改：      要求主题列表随成果类型改变而改变      网上查询资料后开工，在成果类型下拉框添加change()事件触发Dwr，查询主题集合——动态创建/编辑Table      概要代码如下：JS  代码如下://动态获取主题数据 function getzts(){     parentId = document.getElementById(“bselect1”).value;     if(parentId!=””){         dwrMethod.getZtList(parentId,callback5);     }else{         //清空主题Tabl
Web 开发

81,092

社区成员

341,718

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章