您的位置:1010cc时时彩经典版 > 服务器&运维 > 使用jquery为table动态添加行的实现代码,DOM遍历方

使用jquery为table动态添加行的实现代码,DOM遍历方

发布时间:2019-12-01 21:25编辑:服务器&运维浏览(153)

    复制代码 代码如下: //删除ID为sNews的索引为JQID的tr元素里的内容$.eq; //此文以table为例,#sNews为div的ID;JQID为tr的索引,索引从0开始

    本文向大家简单介绍一下DOM遍历的用法,比如说你有一个给定的元素,你想查找它的父元素、子元素中的一个、它的上一个或下一个节点兄弟节点,这就要用到DOM遍历。

    这里,用的jquery来做的。关键代码如下:

    DOM遍历

    复制代码 代码如下:

    基于ID、元素类型、类名查找元素非常有用,但是如果你想基于它在DOM树中的位置来查找元素该怎么办?换句话说,你有一个给定的元素,你想查找它的父元素、子元素中的一个、它的上一个或下一个节点兄弟节点。例如,采用下面这段零碎的HTML代码:

    //添加數據行;
    function AddRow(){
    var vTb=$("#TbData");//得到表格ID=TbData的jquery对象
    //所有的数据行有一个.CaseRow的Class,得到数据行的大小
    var vNum=$("#TbData tr").filter(".CaseRow").size() 1;//表格有多少个数据行
    var vTr=$("#TbData #trDataRow1"); //得到表格中的第一行数据
    var vTrClone=vTr.clone(true);//创建第一行的副本对象vTrClone
    vTrClone[0].id="trDataRow" vNum;//設置 第一個Id為當前獲取索引;防止重複添加多個ID為trDataRow1的數據行;一次添加一個;
    vTrClone.appendTo(vTb);//把副本单元格对象添加到表格下方
    }

    清单1:HTML碎片一个table)

    该方法,主要运用了jquery的clone函数,克隆一个table的行副本。然后添加给原来的table。
    删除方法关键Code:

    <table> <thead> <tr> <th>Name</th> <th>EmailAddress</th> <th>Actions</th> </tr> </thead> <tbody> <tridtrid="row-001"> <td>JoeLennon</td> <td>[email protected]</td> <td><ahrefahref="#">Edit</a>&nbsp;  <ahrefahref="#">Delete</a></td> </tr> <tridtrid="row-002"> <td>JillMacSweeney</td> <td>[email protected]e.com</td> <td><ahrefahref="#">Edit</a>&nbsp;  <ahrefahref="#">Delete</a></td> </tr> </tbody> </table>  
    

    复制代码 代码如下:

    清单1使用缩进来说明其中每个元素节点在DOM树中的位置。在这个实例中,table元素是根元素,有两个子节点thead和tbody。thead元素有一个tr子节点,tr有三个孩子--所有的th元素。tbody元素有两个tr子节点,每个tr节点有三个孩子。在上述每一行的第三个节点中进一步包含子节点,都是两个链接标记。

    1010cc时时彩经典版,var vNum=$("#TbData tr").filter(".CaseRow").size() 1;//表格有多少个数据行;
    if(vNum<=2)
    {
    alert('请至少留一行');
    return;
    }
    var vbtnDel=$(this);//得到点击的按钮对象
    var vTr=vbtnDel.parent("td").parent("tr");//得到父tr对象;
    if(vTr.attr("id")=="trDataRow1")
    {
    alert('第一行不能删除!'); //第一行是克隆的基础,不能删除
    return;
    }else{
    vTr.remove();
    }

    ◆正如你知道的那样,你可以使用一个JavaScript框架的选择函数通过ID很轻松的选择一个元素。在这个实例中,有两个元素拥有ID,它们是ID分别为row-001和row-002的tr元素。使用Prototype库选择第一个tr,可以使用下面的代码:

    复制代码 代码如下: //添加數據行; function AddRow(){ var vTb=$("#TbData");//得到表格ID=TbData的jquery对象...

    vartheRow=$('row-001');   
    

    在上一章,你还了解到,基于元素的类型或class使用选择器来获取元素。在这个实例中,你可以使用下面的语法来得到所有的td元素。

    varallCells=$$('td');   
    

    改代码的主要问题在于它返回了每一个td元素。但是,如果你只想得到ID为row-001的tr的所有td元素该怎么办?这正是DOM遍历函数发挥作用的地方。首先,让我们使用原型来选择ID为row-001的tr的所有的子级。

    本文由1010cc时时彩经典版发布于服务器&运维,转载请注明出处:使用jquery为table动态添加行的实现代码,DOM遍历方

    关键词: