一.添加
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;
}
}
分享到:
相关推荐
在HTML中,`<tr>`标签定义了一行,`<td>`标签定义了单元格,它们通常用于构建表格结构。我们可以通过正则表达式来定位这些标签并提取其内部内容。 **HTML解析与正则表达式** 在大多数情况下,直接使用正则表达式...
这段JavaScript代码通过`getElementById`获取指定ID的表格元素,然后使用`getElementsByTagName`获取所有的`<tr>`元素。接着遍历每一行,并根据行索引的奇偶性设置不同的背景色。 #### 四、使用JavaScript实现鼠标...
第一行`<tr>`使用`<th>`元素,表示表头;第二行和第三行`<tr>`使用`<td>`元素,表示数据行。 为了使表格更具可读性,可以使用`<caption>`标签添加表格标题,`<colgroup>`和`<col>`用于设置整列的样式,例如宽度。...
一个表格由`<table>`标签开始,内部包含`<tr>`(行)标签,`<tr>`中又包含`<td>`(单元格)或`<th>`(表头)标签。例如: ```html <table> <tr> <td>数据1</td> <td>数据2</td> </tr> <tr> <td>数据3</td> ...
- <tr>:表示表格中的一行,用于将多个单元格组合成一行。 - <td>:表示表格中的一个单元格,通常包含文本或其他内容。 - <th>:表示标题单元格,其特点是内容默认居中加粗显示,通常用于表头。 - <thead>:表示表格...
<tr><td>3</td><td>3</td><td>3</td><td>3</td><td>3</td></tr> <tr><td>4</td><td>4</td><td>4</td><td>4</td><td>4</td></tr> <tr><td>5</td><td>5</td><td>5</td><td>5</td><td>5</td></tr> </table> ``` 此...
在这个例子中,`addRow`函数首先通过`getElementById`获取到表格对象,然后使用`insertRow`方法在表格的最后添加一行。接着,我们对新行中的每个单元格执行相同的操作:`insertCell`插入单元格,并设置其内容。 ...
var newRow = $("<tr><td>" + name + "</td><td>" + age + "</td><td><button class='deleteBtn'>删除</button></td></tr>"); $("#myTable tbody").append(newRow); } ``` 在上面的代码中,我们创建了一个新的`...
var newRow = '<tr><td>新姓名</td><td>新年龄</td><td><button class="deleteRow">删除</button></td></tr>'; $('#myTable tbody').append(newRow); }); // 删除行事件 $('#myTable').on('click', '....
- 表格中的每一行由 `<tr>` 元素表示。 - 每个单元格则用 `<td>` 元素表示。 ```html <table id="myTable" width="700" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#666666"> <tbody> ...
- 创建新的`<tr>`元素,可以使用`$('<tr>')`,然后添加`<td>`元素。 - 添加内容,例如`$('<td>').html('新数据')`。 - 将新行插入到表格的特定位置,如末尾,使用`append()`方法:`$("#myTable tbody").append...
要添加更多的行和列,你可以使用`<tr>`标签来定义表行,`<td>`标签来定义单元格。比如,要创建一个一行两列的表格: ```html <table border="2"> <tr> <td>第一列</td> <td>第二列</td> </tr> </table> ``` ...
- **`<tr>`**:定义一行,需嵌套在`<table>`标签内。 - **`<td>`**:定义一个数据单元格,嵌套在`<tr>`内。 - **`td`**:表示表格数据(Table Data)。 ##### 表头单元格 表头单元格通常位于表格的第一行或第一列,...
var newRow = $("<tr><td>" + data1 + "</td><td>" + data2 + "</td><td><button class='deleteRow'>删除</button></td></tr>"); return newRow; } ``` 并设置删除行的事件监听: ```javascript $(".deleteRow")....
又一个动态控制表格的效果,用JavaScript动态生成表格行、表格列,以及还可动态删除这些行列,行等,运行代码后,点击对应的功能按钮,即可实现对应的表格操作功能。 1.jsp <table id=viewTabs> <thead> <tr> <th>...
本主题聚焦于如何使用jQuery实现表格中添加和删除行的功能,这在数据展示和用户交互中非常常见。通过点击按钮动态添加或删除表格行,可以提高用户的交互体验,使得数据管理更加灵活。 首先,我们需要创建一个基本的...
表格由`<tr>`(表格行)组成,每一行又包含多个`<td>`(表格数据单元格)或`<th>`(表头单元格)。在JavaScript中,我们可以通过DOM操作来创建、修改和删除这些元素。 1. **动态添加行**: - 获取表格元素:使用`...
在这个例子中,`<table>`是表格的容器,`<tr>`定义了表格的行,而`<th>`和`<td>`分别表示表头和数据单元格。如果需要合并单元格,可以使用`colspan`和`rowspan`属性,例如: ```html <tr> <td colspan="2">合并...