今天要实现一个在页面中动态添加以及删除一行列表的功能,查找了几种方法,在此备份,以便日后使用:
========================此方法比较简洁，而且可以解决问题========================
function deleteCurrentRow()//刪除當前行
{
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;
document.all.table10.deleteRow(currRowIndex);//table10--表格id
}
function insertRow()
{
var nRow=document.all.table10.rows.length; //表格的總行數
var objTheRow=document.all.table10.insertRow(nRow);//在最下邊新增一行
objTheRow.insertCell(0);//新增一個單元格
objTheRow.insertCell(1);
objTheRow.insertCell(2);
objTheRow.cells(0).innerHTML=nRow;//對新增的單元格?容
objTheRow.cells(1).innerHTML=" ";
objTheRow.cells(2).innerHTML="<input type='button' value='del this row' onClick='deleteCurrentRow()'>";
}
====================我的程序代码======================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=GB18030">
<META name="GENERATOR" content="IBM WebSphere Studio">
<TITLE>cfbcard.html</TITLE>
</HEAD>
<SCRIPT language="JavaScript">
var j_1 = 1;
function add_row_family(){
newRow=document.all.family.insertRow(-1)
newcell=newRow.insertCell()
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
//newcell.innerHTML="<input type='text' name='familyname"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";
newcell.innerHTML="<SELECT name='thesistogether"+j_1+"'>"+
" <option value='请选择'>"+
" 请选择"+
" </option>"+
" <option value='1'>"+
" 111"+
" </option>"+
" <option value='2'>"+
" 222"+
" </option>"+
" <option value='3'>"+
" 333"+
" </option>"+
" <option value='4'>"+
" 444"+
" </option>"+
" <option value='5'>"+
" 555"+
" </option>"+
"</SELECT>";
for(var i = 0;i<12;i++){
newcell=newRow.insertCell() ;
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
newcell.innerHTML="<input type='text' name='familyrelation"+j_1+"' style='WIDTH: 60px; font-size:9pt; color:#000000' />";
}
newcell=newRow.insertCell() ;
newRow.bgColor='#FFFFFF';
newcell.className='STYLE3';
newcell.align='center';
//newcell.innerHTML="<a href='javascript:delTableRow(\""+1+"\")'>删除</a>";
newcell.innerHTML="<input type='button' value='删除' onClick='deleteCurrentRow()'>";
j_1++;
document.all.j_1.value=j_1;
document.all.family.focus();
}
function deleteCurrentRow()//刪除當前行
{
var currRowIndex=event.srcElement.parentNode.parentNode.rowIndex;
document.all.family.deleteRow(currRowIndex);//table10--表格id
}
</script>
<body bgcolor="#F5F1F5" >
<form name="form1" method="post" action="" onsubmit="">
<table>
<tr>
<td align="right"><INPUT type="button" name="add" onclick="add_row_family();" value="添加"></td>
</tr>
<tr>
<td>
<table id="family" style="width:100%" border="1" cellspacing="1" cellpadding="2" class="tbMain">
<tr>
<td class="td_name">111</td>
<td class="td_name">222</td>
<td class="td_name">333</td>
<td class="td_name">444</td>
<td class="td_name">555</td>
<td class="td_name">666</td>
<td class="td_name">777</td>
<td class="td_name">888</td>
<td class="td_name">999</td>
<td class="td_name">000</td>
<td class="td_name">123</td>
<td class="td_name">456</td>
<td class="td_name">789</td>
<td class="td_name">删除</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
=================================另外一种方法==============
如何删除表格的行上次讲到了如何动态给表格增加行，那么这次就讲讲如何删除表格的行了。首先建立一个表格，
<table border="1">
<tr>
<td>姓名</td>
<td>地址</td>
</tr>
<tbody id="mainbody">
<tr id="delCell">
<td>name</td>
<td>address</td>
</tr>
</tbody>
</table>
取得tbody的元素var mailbody = document.getElementById("mainbody");,
接着取得要删除行的元素var cell = document.getElementById("delCell");
最后就是从tbody中移去要删除的行就可以了mainbody.removeChild(cell);
完整的代码如下：
<html>
<head>
<title>动态删除表格的行</title>
<script type="text/javascript">
function deleteCell(){
var mailbody = document.getElementById("mainbody");
var cell = document.getElementById("delCell");
if(cell!=undefined){
mainbody.removeChild(cell);
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>姓名</td>
<td>地址</td>
</tr>
<tbody id="mainbody">
<tr id="delCell">
<td>name</td>
<td>address</td>
</tr>
</tbody>
</table>
<input type="button" value="删除" onclick="deleteCell()"/>
</body>
<html>
分享到：
相关推荐
要添加一行，我们需要确定要在哪一行之后插入新的行。jQuery提供了`eq()`方法来选择具有特定索引的元素。例如，`$("#mytable tr").eq(0)`将选择第一行，`$("#mytable tr").eq(-1)`将选择最后一行。`nth-child(n)`...
以下是对这个"js实现添加删除一行。每一行下面可以再添加一行。序号自动改变"知识点的详细解释： 1. **动态创建DOM元素**： - 在JavaScript中，我们可以通过`document.createElement()`方法来创建新的HTML元素，如...
标题中的“通过点击添加按钮即可自动添加一行点击删除即可自动删除一行”指的是一个交互功能，常见于表格或者列表中，允许用户动态地增加或减少条目。这种功能在Web开发中非常常见，尤其是在数据管理、表单填写等...
在JavaScript中，动态添加行和删除行是网页交互中常见的需求，特别是在表格或者列表展示数据时。这通常涉及到DOM操作，包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点： 1. DOM操作： - `...
标签解释：删除添加一行，指的是在网页中通过 JavaScript 动态添加或删除表格行的操作。 部分内容解释： 该代码主要实现了两个功能：动态添加表格行和删除表格行。下面对这两个功能进行详细解释： 动态添加表格行...
本话题将深入探讨如何实现一个动态表格，用户可以适时添加、删除和复制表格中的行。 首先，我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器，获取或提交数据，然后使用JavaScript处理这些...
这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先，让我们了解一下这个功能的核心概念： 1. **HTML结构**：基础的HTML表格由`<table>`元素定义，包括`<thead>`...
本篇文章将深入探讨如何在GridView中实现动态添加和删除行，以及如何在用户保存时批量保存数据。 ### GridView简介 GridView是ASP.NET中的一个服务器控件，用于显示来自数据源（如数据库、XML或数组）的数据。默认...
要动态添加一行，首先需要获取到表格的引用，通常是通过`document.getElementById`或`document.querySelector`来实现。然后，创建一个新的`<tr>`元素，并为它添加需要的`<td>`子元素。最后，使用`appendChild`或`...
下面是一个简单的示例代码，展示了如何在表格末尾添加一行： ```javascript // 获取表格和添加按钮 var table = document.getElementById('myTable'); var addBtn = document.getElementById('addRowBtn'); // ...
本文将深入探讨如何使用jQuery实现表格的动态添加和删除行功能，这在许多网页应用中是非常常见的需求。 首先，让我们理解基本概念。在HTML中，表格由`<table>`元素定义，每行由`<tr>`元素表示，而单元格则由`<td>`...
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能，以提高网页交互性。 一、HTML基础 首先，我们需要一个基本...
在Web前端开发中，动态地添加和删除页面元素是一种常见的交互方式，尤其在表单设计中，这种功能的实现能够极大地提升用户体验。使用jQuery库可以方便地实现这些功能，因为它提供了丰富的选择器和方法来操作DOM元素。...
这个例子展示了如何在用户点击“添加行”按钮时向表格添加一行，以及在点击“删除选中行”按钮时删除最后一行。实际应用中，你可能需要根据用户的选择或其他条件来决定删除哪一行。 在实际项目中，你可能会遇到更...
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。在处理表格数据时，动态添加和删除行是常见的需求，尤其在数据管理或者表单提交的场景下。本篇文章将详细介绍两种...
- **`insertRow` 函数**：根据传入的索引值，在表格中插入一行，并填充两个单元格的数据。 - **`deleteRow` 函数**：根据传入的索引值，删除表格中的一行。 - **`getIndex` 函数**：获取当前点击行的索引，并显示...
3. **添加数据单元格**：在新行中添加`<td>`元素，根据需求填充数据。例如，`var cell = document.createElement('td'); cell.innerHTML = '新数据';`。 4. **插入新行**：最后，将新行插入到表格中。可以使用`...
6. 表单元素的创建：在新插入的行中创建了文本输入框（`<input type="text">`）以及按钮（`<input type="button">`）。这些表单元素可以用于用户输入数据或触发事件。 7. 用户交互反馈：当用户点击“删除”按钮时，...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理以及动画效果。本文将深入探讨如何使用 jQuery 动态添加和删除表格行，以实现高效且用户友好的数据展示。 首先，理解 HTML 表格...