• 技术文章 >web前端 >js教程

    js怎么清空tr

    (*-*)浩(*-*)浩2020-09-18 10:27:21原创2851

    js清空tr的实现方法:首先获取第一个td的要删除行的Index;然后进行循环操作;最后将tr中的td的数据都删除一遍即可实现清空tr。

    大前端成长进阶课程:进入学习

    本篇文章将介绍如何使用js清空tr里的所有数据。

    使用js清空tr里的数据,首先你要获取第一个td的要删除行的Index,然后进行循环操作,将tr中的td的数据都删除一遍,这时tr就被清空了。这是一个思路,下面的代码进行这样写的,当然,如果你对节点,选择器理解透彻,还将以将以下代码更加的简化.

    请看以下代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <script language="javascript">// Example: obj = findObj("image1");
    function findObj(theObj, theDoc)
    { 
    var p, i, foundObj; 
    if(!theDoc) theDoc = document; 
    if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) 
    {  theDoc = parent.frames[theObj.substring(p+1)].document;  theObj = theObj.substring(0,p); } if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj]; for (i=0; !foundObj && i < theDoc.forms.length; i++)   foundObj = theDoc.forms[i][theObj]; for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)   foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);  return foundObj;
    }
    
    //删除指定行
    function DeleteSignRow(rowid){
    var signFrame = findObj("SignFrame",document);
    var signItem = findObj(rowid,document);
    alert(rowid);
    //获取将要删除的行的Index
    var rowIndex = signItem.rowIndex;
      
    //删除指定Index的行
    signFrame.deleteRow(rowIndex);
      
    //重新排列序号,如果没有序号,这一步省略
    for(i=rowIndex;i<signFrame.rows.length;i++){
    signFrame.rows[i].cells[0].innerHTML = i.toString();
    }
    }
    //清空列表
    function ClearAllSign(){
    if(confirm('确定要清空所有参与人吗?')){
    var signFrame = findObj("SignFrame",document);
    var rowscount = signFrame.rows.length;
      
    //循环删除行,从最后一行往前删除
    for(i=rowscount - 1;i > 0; i--){
      signFrame.deleteRow(i);
    }
      
    //重置最后行号为1
    var txtTRLastIndex = findObj("txtTRLastIndex",document);
    txtTRLastIndex.value = "1";
      
    
    }
    }
    </script>
    </HEAD>
      
    <BODY>
    <div>
    <table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">
           <tr id="trHeader">
            <td width="27" bgcolor="#96E0E2">序号</td>
            <td width="64" bgcolor="#96E0E2">用户姓名</td>
            <td width="98" bgcolor="#96E0E2">电子邮箱</td>
            <td width="92" bgcolor="#96E0E2">固定电话</td>
            <td width="86" bgcolor="#96E0E2">移动手机</td>
            <td width="153" bgcolor="#96E0E2">公司名称</td>
            <td width="57" align="center" bgcolor="#96E0E2"> </td>
           </tr>
        </table>
      </div>
      <div>
        <input type="button" name="Submit" value="添加参与人" onclick="AddSignRow()" /> 
       <input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />
       <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
      </div>
      
    </BODY>
    </HTML>

    以上就是js怎么清空tr的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:js
    上一篇:JSBridge是什么 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• jsp怎么实现搜索功能• jsp怎么学• jsp里怎么引用java函数• 返回json用什么注解
    1/1

    PHP中文网