Javascript处理表格行的添加,删除,及重载时新增行的处理;
具体代码如下:
<SCRIPT type=text/javascript src="mdbDataBase.js"></SCRIPT>
<script>
//添加行;
function addRow(tabId,rowNum,tdRows,startId,hidId){
var tab = document.getElementById(tabId);
var rowNum = document.getElementById(rowNum);
var tbRows = document.getElementById(tdRows);
var hidObj = document.getElementById(hidId);
hidObj.value++;
var cells = rowNum.getElementsByTagName('td')[0].colSpan;
var rowIndex = rowNum.rowIndex;
var tr = tab.insertRow(rowIndex);
tbRows.rowSpan++;
var tdId = tab.rows.length*cells + startId
for(var i=0; i<cells; i++){
var td = tr.insertCell();
td.style.border = '1px solid #000';
td.innerHTML = '<textarea class="textarea1" id='+tdId+' style="width:90%"></textarea>'
tdId++
}
}
//删除行1
function deleteRow(tabId,rowNum,tdRows,hidId){
var tab = document.getElementById(tabId);
var rowNum = document.getElementById(rowNum);
var tbRows = document.getElementById(tdRows);
var hidObj = document.getElementById(hidId);
var rowIndex = rowNum.rowIndex;
var hidVal = hidObj.value;
if(hidVal>0){
tab.deleteRow(rowIndex-1);
hidObj.value--;
tbRows.rowSpan--;
}else{
alert('无法删除!')
}
}
//删除行2
function deleteRow2(tabId,rowNum,tdRows,hidId){
var tab = document.getElementById(tabId);
var rowNum = document.getElementById(rowNum);
var tbRows = document.getElementById(tdRows);
var hidObj = document.getElementById(hidId);
var rowIndex = rowNum.rowIndex;
var hidVal = hidObj.value;
if(hidVal>0){
tab.deleteRow(rowIndex-1);
hidObj.value--;
}else{
alert('无法删除!')
}
}
//页面重载时,加载增加的行的数据;
function loadTableByHiddenValue(arr){
for(var i=0; i<arr.length; i++){
var hid = document.getElementById(arr[i]);
var hid_val = hid.value;
if(hid_val>0){
var hid_id = hid.id;
for(var j=0; j<hid_val; j++){
var add_id = "add"+hid_id;
var add_btn = document.getElementById(add_id);
add_btn.click();
}
}
hid.value=hid_val;
}
}
</script>
</head>
<body onload="Show('表格处理数据'),loadTableByHiddenValue(['0017','0018']),Show('表格处理数据')">
<input type="button" value="更新" onclick="update('表格处理数据')" />
<table id='tab' width="60%" border="1">
<tr>
<td width="7%">标题</td>
<td width="16%">标题</td>
<td width="22%">标题</td>
<td width="18%">标题</td>
<td width="20%">标题</td>
<td width="17%">标题</td>
</tr>
<tr>
<td id="tdRows1" rowspan="3"><p>标</p><p>题</p></td>
<td>标题</td>
<td><textarea class='textarea1' id='0016' style="width:80px;" /></textarea> </td>
<td><textarea class='textarea1' id='0001' style="width:80px;" /></textarea></td>
<td><textarea class='textarea1' id='0002' style="width:80px;" /></textarea></td>
<td><textarea class='textarea1' id='0003' style="width:80px;" /></textarea></td>
</tr>
<tr>
<td>标题</td>
<td><textarea class='textarea1' id='0004' style="width:80px;" /></textarea></td>
<td><textarea class='textarea1' id='0005' style="width:80px;" /></textarea></td>
<td><textarea class='textarea1' id='0006' style="width:80px;" /></textarea></td>
<td><textarea class='textarea1' id='0007' style="width:80px;" /></textarea></td>
</tr>
<tr id='rowNum1'>
<td colSpan=5>
<input type='hidden' id='0017' value=0 />
<input type='button' value=' 添 加 ' id='add0017' onClick="addRow('tab','rowNum1','tdRows1',1000,'0017')"/>
<input type='button' value=' 删 除 ' id='del0017' onClick="deleteRow('tab','rowNum1','tdRows1','0017')"/>
</td>
</tr>
<tr>
<td id="tdRows2" rowspan="3"><p>标</p><p>题</p></td>
<td>标题</td>
<td><textarea class='textarea1' id='0008' style="width:80px;" /></textarea></td>
<td><textarea class='textarea1' id='0009' style="width:80px;" /></textarea></td>
<td><textarea class='textarea1' id='0010' style="width:80px;" /></textarea></td>
<td><textarea class='textarea1' id='0011' style="width:80px;" /></textarea></td>
</tr>
<tr>
<td>标题</td>
<td><textarea class='textarea1' id='0012' style="width:80px;" /></textarea></td>
<td><textarea class='textarea1' id='0013' style="width:80px;" /></textarea></td>
<td><textarea class='textarea1' id='0014' style="width:80px;" /></textarea></td>
<td><textarea class='textarea1' id='0015' style="width:80px;" /></textarea></td>
</tr>
<tr id='rowNum2'>
<td colSpan='5'>
<input type='hidden' id='0018' value=0 />
<input type='button' value=' 添 加 ' id='add0018' onClick="addRow('tab','rowNum2','tdRows2',1100,'0018')"/>
<input type='button' value=' 删 除 ' id='del0018' onClick="deleteRow2('tab','rowNum2','tdRows2','0018')"/>
</td>
</tr>
</table>
</body>
相关推荐
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`<table>`元素用于创建...
- **创建新行**:要向表格添加行,首先需要创建一个新的`<tr>`元素,然后创建`<td>`元素并设置其内容。最后,将这些元素添加到表格的`<tbody>`标签内。 - **删除行**:通过获取行的引用(例如,通过点击事件的`...
2. **新增行**:要向表格添加新行,首先需要创建一个`<tr>`元素,然后为该行添加单元格(`<td>`)。这可以通过`document.createElement()`方法实现,最后使用`appendChild()`将新行添加到表格的`<tbody>`元素中。...
在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...
本篇文章将深入探讨如何使用JavaScript自动添加、删除表格,以及实现窗口居中显示的相关技术。 首先,让我们来理解“JavaScript自动添加表格”。在HTML中,表格由`<table>`元素定义,行(`<tr>`)、列(`<td>`或`<th>`...
"表格删除线"就是这样一个功能,它允许用户在表格中添加删除线,以视觉上标识出已被删除但尚未实际移除的数据行。这样的功能对于版本控制或者协作编辑场景特别有用,因为它提供了明确的修改记录。 首先,让我们来...
"动态表格-添加删除行"这个主题涉及到的技术主要是JavaScript库AutoTable,它允许开发者在HTML页面上创建功能丰富的表格,并且支持动态操作,如添加和删除行。下面我们将详细探讨AutoTable的使用、动态操作行的方法...
在本文中,我们将深入探讨如何使用JavaScript来动态地操作表格,包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下,实现灵活的数据管理功能。 1. **创建表格** 在HTML中,我们可以使用`...
以下是一个简单的例子,展示如何使用JavaScript添加和删除表格行: ```javascript // 获取表格元素 var table = document.getElementById('myTable'); // 添加行 function addRow() { var row = table.insertRow...
- 在HTML表格中,可以使用JavaScript动态创建新的`<tr>`(行)元素并将其添加到`<tbody>`中。通过DOM操作,如`createElement()`、`appendChild()`或`insertBefore()`,可以在表格的末尾或指定位置插入新行。 - 在...
"js动态表格--行操作"这个主题主要涵盖了如何使用JavaScript来创建、修改和管理表格的行。下面我们将详细探讨这些知识点。 首先,我们需要理解HTML表格的基本结构,包括`<table>`,`<tr>`,`<th>`和`<td>`等元素。`...
为每一行生成时添加删除按钮: ```javascript function createRow(data1, data2) { var newRow = $("<tr><td>" + data1 + "</td><td>" + data2 + "</td><td>删除</button></td></tr>"); return newRow; } ``` 并...
本压缩包"layui表格添加行删除保存代码.zip"就是针对这种需求的一个实例,主要展示了如何使用Layui实现表格数据的动态添加、删除和保存功能。下面将详细解释这些功能的实现原理和步骤。 首先,"说明.htm"文件通常会...
在JavaScript中,我们可以使用`document.createElement()`方法创建新的表格元素,然后使用`appendChild()`将它们添加到页面上。 2. **数据绑定**:数据存储可以采用数组或对象的形式,其中每一项代表表格的一行。...
在开发Web应用时,动态添加和删除表格行是常见的需求,尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能,为初学者提供一个基础的实践指导。 首先,我们要了解...
// 将表格添加到文档的某个位置,如body document.body.appendChild(table); ``` 接下来是删除表格。这通常涉及到找到特定的表格元素并使用`removeChild()`方法移除它们。例如,要删除刚才创建的表格,你可以这样...
本篇内容主要介绍了使用JavaScript进行表格操作的方法,包括创建表格、删除行与单元格、选取表格元素以及处理表格事件等。这些技术对于开发动态网页或应用程序来说是非常有用的。通过这些技术,可以实现更加灵活的...
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含,其中包含`<tr>`(表格行)元素,每行内可以有多个`<td>`(表格数据单元格)或`...
本文将深入探讨如何使用 jQuery 动态添加和删除表格行,以实现高效且用户友好的数据展示。 首先,理解 HTML 表格的基本结构至关重要。`<table>` 元素用于创建表格,`<tr>` 代表表格行,`<td>` 或 `<th>` 分别表示...