//需求：js实现多条记录的更新
//1、从页面的表格A中，选择商品添加到表格B中，
//2、表格B中，对应每条商品，输入数量。
//3、表格B中的商品不能重复，可以删除。
//4、能同时传入后台，更新到数据库
//5、或传入其他页面，并显示出来。
//js通过添加表的一行，删除一行。遍历表结构等方法实现
//可修改为其他功能：
//多条记录同时修改并且更新到数据库
<html>
<script language="JavaScript">
var i=0;//行的id
var num;
var tdname;
var unit;
var list= new Array();
var numList=new Array();
var flag=true;
function addRow(){//添加行
var table=document.getElementById("table");
var length=table.rows.length;
var tr=document.createElement("tr");
tr.id=++i;
var td0=document.createElement("td");
td0.innerHTML="<input type=\"text\" value=\""+num+"\"/>";//不用文本框下面取不出来。 （因遍历的方式需要不带文本框）
tr.appendChild(td0);
var td1=document.createElement("td");
tdname="第"+i+"行 "+tdname;
td1.innerHTML="<input type=\"text\" value=\""+tdname+"\" name=\"name\" id=\"name\"/>";
tr.appendChild(td1);
var td2=document.createElement("td");
td2.innerHTML="<input type=\"text\" value=\""+unit+"\" name=\"unit\"/>";
tr.appendChild(td2);
var td3=document.createElement("td");
//td3.id=tr.id;
td3.innerHTML="<input type=\"button\" value=\"del\" onclick=\"del(this.parentElement.parentElement,this.parentElement.parentElement.id)\"/>";
tr.appendChild(td3);
addData(i);//含数据验证
if(flag==true){
document.getElementById("newbody").appendChild (tr);
}else{
i--;
}
}
function del(src,index){
var tr=document.getElementById(index);
tr.parentNode.removeChild(tr);
delData(index);
}
function addData(rid){
flag=true;
for(var i=0;i<=numList.length;i++){
if(num==numList[i]){
flag=false;
alert("该名称您已经添加！请查看已添加的列表。");
}
}
if(flag==true){
numList[numList.length]=num;
var str="{"+num+","+tdname+","+unit+"}";
list[rid]=str;
}
}
function delData(rid){ list[rid]=""; }
function getList(){
var jsonStr="{check:[";
var showStr="{ID 名称 单位}<br>"
var s="";
for(var i=0;i<=list.length;i++){
s=list[i];
if(s!=""){
if(s!=undefined){
jsonStr+=list[i]+",";
showStr+=list[i]+"<br>";
}
}
}
jsonStr=jsonStr.substring(0,jsonStr.length-1);
jsonStr+="]}";
//alert("结果:"+jsonStr);
var contain=document.getElementById("div1");
contain.innerHTML=jsonStr+"<br>"+showStr;
}
function getTable(){
var tableObj = document.getElementById("table");
//alert(tableObj.rows.length+"/"+tableObj.rows[0].cells.length+"/"+tableObj.rows[0].cells[0].children.length);
//alert(tableObj.rows[1].cells[0].children[0].value);
var str = "<table border=\"1\"><tr><td>ID</td><td>名称</td><td>单位</td></tr>";
for(var i=0;i<tableObj.rows.length;i++){//行
str+="<tr>";
for(var j=0;j<tableObj.rows[i].cells.length-1;j++){//列
for(var z=0;z<tableObj.rows[i].cells[j].children.length;z++){
var text = tableObj.rows[i].cells[j].children[z];//取得text object
str +="<td>"+text.value+"</td>";
}
} str+="</tr>";
}
str+="</table>";
//alert(str);
var contain=document.getElementById("div2");
contain.innerHTML=str;
// var ob=document.getElementById("tb2").getElementsByTagName("input");
// for(var j=0;j<ob.length;j++)
// {
// if(ob[j].type=="text")
// {
// jx+=j;
// }
//}
}
function set(){ //该方法有问题。
var a="";
//alert(document.getElementById(name));
alert(document.find.name.length);
for(var i=0;i<document.find.name.length;i++){
a+=document.find.name[i].value;
a=a+":"+document.find.unit[i].value+"/";
}
//window.opener.document.getElementById("unit").value=uu;
alert("打印结果："+a);
//window.close();
}
</script>
<BODY>
<form method="post" action="" name="find">
<table id="table" border="1">
<tr><td>ID</td><td>名称</td><td>单位</td> <td>删除</td> </tr>
<tbody id="newbody"></tbody>
</table>
</form>
<input type="button" onClick="getList()" value="getList"/>
<input type="button" onClick="getTable()" value="getTable"/>
<div id="div1"></div>
<div id="div2"></div>
<table border="1" id="t1">
<tr > <td>数据项</td> </tr>
<tr onMouseDown="
num=this.cells.item(0).innerHTML;
tdname=this.cells.item(1).innerHTML;
unit=this.cells.item(2).innerHTML;" >
<td>1</td><td>name1</td><td>unit1</td>
<td><input type="button" onClick="addRow()" value="addRow"/></td> </tr>
<tr onMouseDown="
num=this.cells.item(0).innerHTML;
tdname=this.cells.item(1).innerHTML;
unit=this.cells.item(2).innerHTML;" >
<td>2</td><td>name2</td><td>unit2</td>
<td><input type="button" onClick="addRow()" value="addRow"/></td> </tr>
</table>
</BODY>
</html>
分享到：
相关推荐
实际应用中，你可能需要根据具体的业务逻辑调整这些示例，比如通过循环遍历所有行，或者根据特定条件（如用户点击某行的删除按钮）来添加或删除行。在`删除行.html`和`添加行.html`文件中，你应该能找到更详细的实现...
这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...
本文将详细介绍如何使用 jQuery 实现表格的添加、删除行与列的操作。 ### 1. 添加行 添加行通常涉及到在 `<tbody>` 标签内插入新的 `<tr>` 元素。可以使用 jQuery 的 `append()` 方法来完成： ```javascript // ...
这里可以遍历每一行，然后向每行的末尾添加新的`<td>`： ```javascript var newColumn = '<td>New Column Data</td>'; $('#myTable tr').each(function() { $(this).append(newColumn); }); ``` 这段代码将一个新...
### JS动态添加删除行知识点详解 #### 一、概述 在网页开发中，经常会遇到需要动态操作表格元素的情况，比如动态地添加或删除表格行。本文将基于给定的脚本代码来详细介绍如何使用JavaScript（简称JS）实现动态...
Element UI是一个基于Vue 2.0的组件库，提供了丰富的UI组件，其中包括表格（Table）组件，非常适合用于实现复杂的表格操作，如添加、修改、单独删除以及批量删除行。本文将详细介绍如何在Element UI的表格组件中实现...
"js Table相同行合并，数量汇总"这个主题涉及到的是如何利用JavaScript来合并HTML表格中具有相同内容的行，并对这些行进行数量上的汇总。这在展示分类数据或统计信息时非常实用，可以有效地减少重复信息，使表格更加...
在本文中，我们将深入探讨如何使用JavaScript来动态地操作表格，包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下，实现灵活的数据管理功能。 1. **创建表格** 在HTML中，我们可以使用`<table...
删除表格行则可以通过遍历表格中的行并根据需要移除它们来实现。以下是一个删除所有行的例子： ```javascript $('#deleteRows').click(function() { $('#dynamicTable tbody tr').remove(); }); ``` 在这个代码...
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
本主题主要聚焦于如何利用JavaScript动态创建一个包含表格（table）的DOM结构，并且在表格行（tr）中添加可点击的按钮。这通常用于展示数据集，允许用户进行交互操作，比如删除、编辑或查看详情。 首先，我们需要...
<title>jQuery动态添加删除行 <script src="https://code.jquery.com/jquery-3.6.0.min.js"> <table id="myTable"> 姓名 年龄 操作 张三 <td>25 <td><button class="delete">删除</button></...
在JavaScript和jQuery中遍历Table的所有单元格内容是常见的任务，尤其在处理表格数据时非常有用。下面将详细讲解这两种方法。 首先，我们来看纯JavaScript的实现方式： ```javascript function GetInfoFromTable...
在处理Web前端交互时，经常会遇到需要动态地对表格进行操作的场景，如动态添加表格行、删除表格行、遍历表格取值等。本文将详细阐述如何使用JavaScript来实现这些功能，并给出具体的代码示例。 ### 动态添加表格行 ...
在JavaScript（JS）编程中，动态管理HTML元素是常见的需求，特别是对于表格（Table）这样的数据展示组件。本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一...
本压缩包"layui表格添加行删除保存代码.zip"就是针对这种需求的一个实例，主要展示了如何使用Layui实现表格数据的动态添加、删除和保存功能。下面将详细解释这些功能的实现原理和步骤。 首先，"说明.htm"文件通常会...
本实例主要展示了如何使用JavaScript来实现对表格（`<table>`）中的行（`<tr>`）进行添加、删除和清空的操作。我们将深入探讨这些功能的实现细节。 1. **添加行（`<tr>`）** 添加行的功能通过`insertRow()`方法...
本文将深入探讨如何使用JavaScript实现对表格的动态添加、删除、修改和查询功能，结合给出的标签“源码”和“工具”，我们将以一个实际的示例来解析这一过程。 首先，我们需要理解HTML中的`<table>`元素结构。一个...
在JavaScript中，对HTML表格（`<table>`）进行操作是一项常见的任务，包括添加行、删除行等。这里我们将深入探讨这些操作，并提供相应的代码示例。 首先，我们需要理解HTML表格的基本结构。一个HTML表格由`<table>`...
在JavaScript（JS）中，动态添加和删除表格是常见的任务，尤其在开发交互式Web应用时。这涉及到了DOM（Document Object Model）操作，因为HTML表格实际上是由一系列DOM元素组成的。下面将详细介绍如何使用JavaScript...