<HTML>
<HEAD>
<TITLE>表格动态追加、插入、删除行</TITLE>
</HEAD>
<BODY >
<table id="DetailTable" border="1" width="60%" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" bordercolordark="#ffffffff" >
<tr>
<td width="40%" align="center" bgcolor="#999999">姓名</td>
<td width="20%" align="center" bgcolor="#999999">性别</td>
<td width="40%" align="center" bgcolor="#999999">年龄</td>
</tr>
<tr>
<td width="40%" align="center"> <input type="text" name="username" style="width:200px"/></td>
<td width="20%" align="center">
<select style="width:100px">
<option value="boy">男</option>
<option value="girl">女</option>
</select>
</td>
<td width="40%" align="center"><input type="text" name="age" style="width:200px"/></td>
</tr>
</table>
<table id="TmpTable" style="display:none;">
<tr>
<td width="40%" align="center"><input name="msgid" type="radio" value="msgid"><input type="text" name="username" style="width:200px"/></td>
<td width="20%" align="center">
<select style="width:100px">
<option value="boy">男</option>
<option value="girl">女</option>
</select>
</td>
<td width="40%" align="center"><input type="text" name="age" style="width:200px"/></td>
</tr>
</table>
<br>
<table border="0" width="96%" align="center" >
<tr><td align="center">
<input type=button class="appButton" onClick="doAppend(DetailTable)" value=" 追 加 " >
<input type=button class="appButton" onClick="doInsert(DetailTable)" value=" 插 入 " >
<input type=button class="appButton" onClick="doRemove(DetailTable)" value=" 删 除 " >
</td>
</table>
<script language="javascript">
function doAppend(obj){
if(obj==null){
return;
}
rows=obj.rows;
if(rows==null){
return;
}
srcElem=rows[rows.length-1];
var tmpTable=TmpTable;
if(tmpTable==null){
return;
}
var trows=tmpTable.rows;
if(trows==null){
return;
}
newrow = obj.insertRow(srcElem.rowIndex+1);
temprow=trows[0].cloneNode(true);
newrow.replaceNode(temprow);
newrow=null;
tmprow=null;
}
function removeAllRow(obj){
if(obj==null){
return;
}
rows=obj.rows;
for(i=1;i<rows.length;i++){
desc=rows[i];
obj.deleteRow(desc.sectionRowIndex);
i--
rows=obj.rows;
}
}
function doInsert(obj){
var srcElem=getSelectedRow(obj);
if(srcElem==null){
alert("请选择要插入的行");
return;
}
var tmpTable=TmpTable;
if(tmpTable==null){
return;
}
var trows=tmpTable.rows;
if(trows==null){
return;
}
window.status="";
newrow = obj.insertRow(srcElem.rowIndex);
temprow=trows(0).cloneNode(true);
newrow.replaceNode(temprow);
window.status="";
}
function doRemove(obj){
srcElem=getSelectedRow(obj);
if(srcElem==null){
alert("请选则要删除的行");
return;
}
obj.deleteRow(srcElem.sectionRowIndex);
}
function getSelectedRow(obj){
if(obj==null){
return null;
}
rows=obj.rows;
if(rows==null){
return null;
}
var field=document.all.msgid;
if(field==null){
return null;
}
var srcElem=null;
for(i=0; i<field.length; i++){
if(field[i].checked){
srcElem=field[i];
break;
}
}
if(srcElem==null){
return null;
}
while (srcElem.tagName != "TR"){
srcElem = srcElem.parentElement;
}
return srcElem;
}
</script>
</BODY>
</HTML>
分享到：
相关推荐
要使用jQuery动态添加行，我们可以先创建一个新的`<tr>`元素，然后在其中填充`<td>`元素，最后将其插入到表格中。以下是一个基本的添加行示例： ```javascript // 创建新行 var newRow = $("<tr><td>新数据1</td>...
bootstrapTable实现表格内数据的添加、删除、修改、查询
Aspose.Words提供丰富的表格操作功能，如创建、删除、合并单元格、调整列宽和行高、设置边框样式等。你可以创建一个新的`Table`对象，添加行和单元格，然后将其添加到文档中。对于已存在的表格，可以使用`Row`和`...
在这段示例代码中，展示了如何使用JavaScript结合jQuery库来实现对HTML表格的基本操作——添加行和删除行。 ### 知识点一：基本的HTML结构 示例代码提供了一个简单的HTML表格结构，包含一个有边框的表格（border='...
在介绍jQuery动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...
下面将详细阐述如何通过JavaScript的`insertRow`方法将下拉框的内容插入到表格中，并使用`delRow`方法删除表格中的行。 首先，我们需要了解HTML的`<select>`元素，它是创建下拉框的主要方式。下拉框通常包含一系列`...
在表格中添加或删除行时，可以结合`clone()`（复制元素）、`empty()`（清空内容）和上述的插入删除方法。例如，要添加一行，可以先复制模板行，然后修改内容，最后插入到表格中。 六、表格排序 jQuery本身并不提供...
插入Times 2号字标记 插入表格标记 插入行标记 插入单元格标记 插入超链接标记 插入居中标记 插入段落标记 插入换行标记 插入图像标记 插入粗体字标记 插入斜体字标记 插入下划线标记 插入注释...
在这个场景下，标题和描述提及了三个主要操作：追加`tr`（表格行）、删除当前`tr`以及提交校验`tr`的所有`name`值。这里我们将详细讲解这三个操作的实现，并结合描述中的“页面回显tr td的值”来探讨如何在...
用docx4j,jar出去word书签，在word书签中插入文本 源码可以通过以下链接查看： https://github.com/xulp-mzl/xlp-core https://github.com/xulp-mzl/xlp-third ...实例： public static void main(String[] args) ...
文档通过具体的代码实例展示了如何在页面加载完成后，通过JavaScript代码段，为表格添加新行，并提供删除已有行的功能。 ### 核心知识点 #### HTML文档结构 首先，文档中包含了基础的HTML结构，其中包括一个`...
在实际开发中，我们可能需要根据不同的需求动态地添加或删除行和列，以适应变化的数据结构。下面我们将详细介绍如何在C#中实现`DataGridView`动态添加行和列的方法。 首先，让我们来看看如何动态添加列。在`...
总结来说，本文通过具体的示例代码展示了如何使用JavaScript动态地在HTML表格中添加和删除行及单元格，这是前端开发中的一个重要技能，不仅适用于数据展示，还可以用于创建丰富的用户交互体验。掌握这一技能将有助于...
总结，这个实例展示了如何利用JavaScript动态操作HTML表格，包括添加新行、删除行以及清空行。这些基本操作对于构建交互式Web应用程序非常有用，特别是那些需要用户输入数据或动态显示数据的应用。理解并掌握这些...
你可以通过编程方式添加、删除和重命名工作表，方便组织和管理数据。 3. **内容写入**：你可以利用LibXL API向任意单元格写入文本、数字、日期和公式。此外，还可以设置单元格的值、样式、对齐方式以及字体属性等。...
- `set showmode`: 显示当前模式（插入或追加）。 - `set list`: 显示行尾的美元符号和制表符。 - `set showmatch`: 高亮匹配的括号。 - `set window=value`: 设置屏幕行数。 - `set autoindent`: 自动缩进。 ...
在实际应用中，通常会涉及到从服务器获取数据，然后根据这些数据动态构建表格的行和列。如果是这种情况，我们可能需要使用更加复杂的方法，比如使用document.createElement()方法动态创建元素，并且逐个设置它们的...
当需要在表格中动态添加或删除行时，开发者可以使用jQuery提供的各种DOM操作方法，例如`append()`、`prepend()`、`remove()`等。合理使用这些方法可以极大提高页面响应用户操作的效率。 知识点七：表单输入元素 在...
4. 替换、插入或追加数据到已有文件。 5. 转换现有Excel文件或文本文件。 然而，CSpreadSheet也有一些限制： - 它依赖于MFC库，因此需要在支持MFC的环境中运行。 - 未验证是否支持Unicode编码，可能仅限于ANSI字符...