<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="JavaScript">
String.prototype.trim = function()
{
// 用正则表达式将前后空格，用空字符串替代。
//用法 a.trim()
return this.replace(/(^\s*)|(\s*$)/g, "");
}
function doAdd()
{
var myTable = document.all.myTable;
var currentRows = myTable.rows.length;//原来的行数
var atr = myTable.rows[currentRows-1];
var insertTr = myTable.insertRow(currentRows);
var trStr = atr.innerHTML; //表格最后一行的html代码
var trhtmlArray = trStr.split("<TD>");
var cols = myTable.rows[0].children.length;//总共列数
//alert(atr.innerHTML);
//alert(cols);
//alert("数组长度="+trhtmlArray.length);
for(var i=0;i<cols;i++)
{
var insertTd = insertTr.insertCell(i);
var tdHtml = trhtmlArray[i+1];//split函数得到了比cols多一个长度
//alert(tdHtml);
//alert(tdHtml.trim().length);
tdHtml = tdHtml.trim().substr(0, (tdHtml.trim().length-5));
//alert(tdHtml);
insertTd.innerHTML = tdHtml;
}
//清除值
for(var i=0;i<cols;i++)
{
var TdElementsCount = myTable.rows[currentRows].children[i].children.length;
if(i==0)
{
var rowNumber = myTable.rows.length-1;
//alert(rowNumber);
myTable.rows[currentRows].children[0].children[0].value = rowNumber;
}
else
{
for(var j=0;j<TdElementsCount;j++)
{
if(myTable.rows[currentRows].children[i].children[j].tagName == "SELECT")
myTable.rows[currentRows].children[i].children[j].selectedIndex = 0;
else
myTable.rows[currentRows].children[i].children[j].value = "";
}
}
}
}
function doAddBatRows()
{
var insertRows = document.all.插入行数.value.trim();
if (!(insertRows =="" || insertRows =="0"))
{
for (var i=0;i<insertRows;i++)
doAdd();
}
}
function dodelete()
{
var myTable = document.all.myTable;
var rows = myTable.rows.length;
if(rows>2)
myTable.deleteRow(rows-1);
}
</script>
<BODY>
<form>
<table id="myTable" border="1" align="center">
<TR align="center" height="20">
<td width="20%">
序号
</td>
<td width="20%">
01
</td>
<td width="20%">
02
</td>
<td width="20%">
03
</td>
<td width="20%">
04
</td>
</TR>
<TR>
<td>
<input type="text" name="id001" value="1" readonly=true>
</td>
<td>
<input type="hidden" name="id010" value="1">
<input type="text" name="id011" value="">
</td>
<td>
<input type="hidden" name="id020" value="1">
<select name="select">
<option value="male">男</option>
<option value="female">女</option>
</select>
</td>
<td>
<input type="hidden" name="id030" value="1">
<input type="text" name="id031" value="">
</td>
<td>
<input type="hidden" name="id040" value="1">
<input type="text" name="id041" value="" onclick="alert();">
</td>
</TR>
</table>
<br>
<input type="button" name="新增一行" value="新增一行" onclick="doAdd();">
<br>
<input type="text" name="插入行数" value="">
<input type="button" name="新增多行" value="新增多行" onclick="doAddBatRows();">
<br>
<input type="button" name="删除一行" value="删除一行" onclick="dodelete();">
</form>
</BODY>
</HTML>
分享到：
相关推荐
添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码
在网页开发中，JavaScript（JS）是一种不可或缺的脚本语言，尤其在处理用户交互时，如动态修改HTML元素。在本话题中，我们将深入探讨如何使用JavaScript来添加和删除HTML表格（table）中的行。这对于构建数据展示...
在JavaScript中，动态添加行和删除行是网页交互中常见的需求，特别是在表格或者列表展示数据时。这通常涉及到DOM操作，包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点： 1. DOM操作： - `...
js 添加行，js 添加列，其他有好多骗人的，我这个是真的,希望用得上的朋友有所帮助，嘿嘿
在JavaScript编程中，实现动态添加和删除表格行是一项常见的需求，尤其在构建数据表或配置界面时。这个功能包括在表格中添加新行、删除现有行，并确保在操作过程中序号自动生成和更新。以下是对这个"js实现添加删除...
在`jstable添加行删除行复制行.html`这个示例文件中，可以看到这些概念是如何具体实现的。通过阅读和理解代码，你可以更深入地学习如何利用JavaScript实现表格的动态管理。同时，也可以结合CSS和jQuery等库来增强...
例如，添加行的按钮可以这样写： ```html ()">添加行 ``` 同时，为了确保用户体验，我们需要处理错误情况，比如在没有表格或者目标行不存在时进行适当反馈。 此外，对于大型数据集，可能需要使用如jQuery或更现代...
以下是关于"js动态添加行"的详细解释： 1. **理解DOM**: DOM是HTML或XML文档的结构化表示，它将网页内容转化为一个树状结构，使得我们可以用编程方式访问和修改页面元素。在JavaScript中，`document`对象提供了与...
添加行 删除选中行 document.getElementById('addBtn').addEventListener('click', function() { addRow('myTable', ['新姓名', '新年龄']); }); document.getElementById('delBtn').addEventListener('click...
在网页开发中，表格（Table）是展示数据的常用元素，而JavaScript（js）则提供了强大的功能来操作DOM（文档对象模型），包括动态地向表格中添加行。本篇文章将详细探讨如何使用JavaScript高效地实现表格动态添加行，...
在JavaScript编程中，动态添加行是一项常见的任务，特别是在构建数据驱动的Web应用或者处理表格数据时。这个技术允许用户在运行时向HTML表格或其他结构化元素中插入新的内容，提高用户体验，无需页面刷新。以下是对...
《SpreadJS 滚动工作表增加行技术详解》 SpreadJS是一款强大的JavaScript电子表格库，它提供了丰富的功能，使得开发者能够轻松地在Web应用中实现类似Excel的表格操作。在"spreadjs_滚动工作表增加行-demo"这个示例...
标题解释:JS 删除或者添加一行的代码，可以直接测试。 描述解释：该代码提供了 JavaScript 实现动态添加或删除表格行的功能，可以直接测试和应用。 标签解释：删除添加一行，指的是在网页中通过 JavaScript 动态...
4. **动态交互**：为了使用户体验更好，可以添加更多的交互功能，比如禁用删除按钮，或者在添加行时自动填充数据。这可以通过检查特定条件或使用`addEventListener`来实现。 5. **性能优化**：在处理大量数据时，应...
在这个例子中，我们将探讨如何利用JavaScript在HTML表格中实现动态添加行，并将数据提交到服务器进行存储。 首先，我们需要创建一个基本的HTML结构，包括一个表单和一个表格。表格中包含预定义的列，如项目名称、...
在JavaScript（JS）编程中，动态增加和删除行是一项常见的任务，特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验，使用户能够实时地添加或移除数据，无需刷新整个页面。以下是对这一知识点的详细...
总结起来，"ASP+JS实现表格实时添加行"涉及的主要技术点有： 1. HTML表格的创建和布局。 2. JavaScript的DOM操作，用于动态添加表格行。 3. JavaScript事件处理，如按钮点击事件。 4. ASP处理服务器端逻辑，如保存...
js增加动态表格，点击增加就增加一行，点击删除就删除一行，每行前面有勾选框，可以勾选，删除多行
如果要添加交互性，如增加或删除行，就需要借助JavaScript。 **增加表格行：** 在JavaScript中，我们可以利用DOM（文档对象模型）操作来实现。以下是一个简单的例子，展示如何在点击按钮时增加一行： ```html <!...
在JavaScript的世界里，动态添加行是一项常见的操作，尤其在处理表格数据或构建可交互的用户界面时。这个“用js实现的动态添加一行”的实践项目是针对AJAX和JavaScript技术的一个基础练习，它旨在帮助开发者掌握如何...