`

使用javascript添加一行与删除一行<tr>

阅读更多
一.添加
var row = document.getElementById("modelRow");  //获取id的值为"modelRow"的对象
 var ln = row.nextSibling;  //获取row的下一个对象
 var ib = document.getElementById("insertRow");  //获取id的值为"insertRow"的对象
 var n = row.cloneNode(true);  //复制row对象
 n.setAttribute("id","model");
 var nln = ln.cloneNode(true);
 row.parentNode.insertBefore(n,ib );  //将对象n插入到对象ib的前面
 row.parentNode.insertBefore(nln,ib);

二.删除
for(var i=2;i<document.all.currow.length; i++){
            if(document.all.currow[i] == obj){
             var ib = document.all.model[i-1];//获取元素节点对象
    var line = ib.previousSibling;//获取同一级的上一个元素
    var row = line.previousSibling;
    if( row.id == "modelRow" )//如果row节点的ID的值等于"modelRow"
    {
     alert('这是最后一项,不能删除');
     return;
    }                 
          ib.parentNode.removeChild(line);//移除line节点
    ib.parentNode.removeChild(row);
    break;
         }
        }
分享到:
评论
1 楼 java-tm0803 2010-10-11  
这......

相关推荐

    获取网页表格数据 正则表达式

    在HTML中,`&lt;tr&gt;`标签定义了一行,`&lt;td&gt;`标签定义了单元格,它们通常用于构建表格结构。我们可以通过正则表达式来定位这些标签并提取其内部内容。 **HTML解析与正则表达式** 在大多数情况下,直接使用正则表达式...

    隔行变色和鼠标滑过变色

    这段JavaScript代码通过`getElementById`获取指定ID的表格元素,然后使用`getElementsByTagName`获取所有的`&lt;tr&gt;`元素。接着遍历每一行,并根据行索引的奇偶性设置不同的背景色。 #### 四、使用JavaScript实现鼠标...

    HTML table的使用

    第一行`&lt;tr&gt;`使用`&lt;th&gt;`元素,表示表头;第二行和第三行`&lt;tr&gt;`使用`&lt;td&gt;`元素,表示数据行。 为了使表格更具可读性,可以使用`&lt;caption&gt;`标签添加表格标题,`&lt;colgroup&gt;`和`&lt;col&gt;`用于设置整列的样式,例如宽度。...

    javascript动态添加tr节点

    一个表格由`&lt;table&gt;`标签开始,内部包含`&lt;tr&gt;`(行)标签,`&lt;tr&gt;`中又包含`&lt;td&gt;`(单元格)或`&lt;th&gt;`(表头)标签。例如: ```html &lt;table&gt; &lt;tr&gt; &lt;td&gt;数据1&lt;/td&gt; &lt;td&gt;数据2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;数据3&lt;/td&gt; ...

    第6章 表格元素.pdf

    - &lt;tr&gt;:表示表格中的一行,用于将多个单元格组合成一行。 - &lt;td&gt;:表示表格中的一个单元格,通常包含文本或其他内容。 - &lt;th&gt;:表示标题单元格,其特点是内容默认居中加粗显示,通常用于表头。 - &lt;thead&gt;:表示表格...

    利用CSS控制表格table的交替颜色

    &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; ``` 此...

    自动在html中使用js添加表格

    在这个例子中,`addRow`函数首先通过`getElementById`获取到表格对象,然后使用`insertRow`方法在表格的最后添加一行。接着,我们对新行中的每个单元格执行相同的操作:`insertCell`插入单元格,并设置其内容。 ...

    JQuery动态添加删除table行.

    var newRow = $("&lt;tr&gt;&lt;td&gt;" + name + "&lt;/td&gt;&lt;td&gt;" + age + "&lt;/td&gt;&lt;td&gt;&lt;button class='deleteBtn'&gt;删除&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;"); $("#myTable tbody").append(newRow); } ``` 在上面的代码中,我们创建了一个新的`...

    利用jquery超级简单实现添加行删除行

    var newRow = '&lt;tr&gt;&lt;td&gt;新姓名&lt;/td&gt;&lt;td&gt;新年龄&lt;/td&gt;&lt;td&gt;&lt;button class="deleteRow"&gt;删除&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;'; $('#myTable tbody').append(newRow); }); // 删除行事件 $('#myTable').on('click', '....

    点击一按钮表结构就增加一行--js代码

    - 表格中的每一行由 `&lt;tr&gt;` 元素表示。 - 每个单元格则用 `&lt;td&gt;` 元素表示。 ```html &lt;table id="myTable" width="700" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#666666"&gt; &lt;tbody&gt; ...

    74、jquery表格动态添加删除行代码

    - 创建新的`&lt;tr&gt;`元素,可以使用`$('&lt;tr&gt;')`,然后添加`&lt;td&gt;`元素。 - 添加内容,例如`$('&lt;td&gt;').html('新数据')`。 - 将新行插入到表格的特定位置,如末尾,使用`append()`方法:`$("#myTable tbody").append...

    HTML表格设置.pdf

    要添加更多的行和列,你可以使用`&lt;tr&gt;`标签来定义表行,`&lt;td&gt;`标签来定义单元格。比如,要创建一个一行两列的表格: ```html &lt;table border="2"&gt; &lt;tr&gt; &lt;td&gt;第一列&lt;/td&gt; &lt;td&gt;第二列&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; ``` ...

    HTML02基础总结.md

    - **`&lt;tr&gt;`**:定义一行,需嵌套在`&lt;table&gt;`标签内。 - **`&lt;td&gt;`**:定义一个数据单元格,嵌套在`&lt;tr&gt;`内。 - **`td`**:表示表格数据(Table Data)。 ##### 表头单元格 表头单元格通常位于表格的第一行或第一列,...

    jquery入门之动态表格---动态添加删除一行

    var newRow = $("&lt;tr&gt;&lt;td&gt;" + data1 + "&lt;/td&gt;&lt;td&gt;" + data2 + "&lt;/td&gt;&lt;td&gt;&lt;button class='deleteRow'&gt;删除&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;"); return newRow; } ``` 并设置删除行的事件监听: ```javascript $(".deleteRow")....

    基于JavaScript实现动态添加删除表格的行

    又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能。 1.jsp &lt;table id=viewTabs&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;...

    jquery表格添加删除行点击按钮动态添加删除行

    本主题聚焦于如何使用jQuery实现表格中添加和删除行的功能,这在数据展示和用户交互中非常常见。通过点击按钮动态添加或删除表格行,可以提高用户的交互体验,使得数据管理更加灵活。 首先,我们需要创建一个基本的...

    js动态添加删除行,实用

    表格由`&lt;tr&gt;`(表格行)组成,每一行又包含多个`&lt;td&gt;`(表格数据单元格)或`&lt;th&gt;`(表头单元格)。在JavaScript中,我们可以通过DOM操作来创建、修改和删除这些元素。 1. **动态添加行**: - 获取表格元素:使用`...

    压缩文件

    在这个例子中,`&lt;table&gt;`是表格的容器,`&lt;tr&gt;`定义了表格的行,而`&lt;th&gt;`和`&lt;td&gt;`分别表示表头和数据单元格。如果需要合并单元格,可以使用`colspan`和`rowspan`属性,例如: ```html &lt;tr&gt; &lt;td colspan="2"&gt;合并...

Global site tag (gtag.js) - Google Analytics