js添加行删除行，遍历table<转载自fly533>
日期：2014-05-16 浏览次数：20371 次
js添加行删除行，遍历table<转载自fly533>
js添加行删除行，遍历table
文章分类:Web前端
//需求：js实现多条记录的更新
//1、从页面的表格A中，选择商品添加到表格B中，
//2、表格B中，对应每条商品，输入数量。
//3、表格B中的商品不能重复，可以删除。
//4、能同时传入后台，更新到数据库
//5、或传入其他页面，并显示出来。
//js通过添加表的一行，删除一行。遍历表结构等方法实现
//可修改为其他功能：
//多条记录同时修改并且更新到数据库
Html代码
<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 delD
js添加行删除行，遍历table
文章分类:Web前端
//需求：js实现多条记录的更新
//1、从页面的表格A中，选择商品添加到表格B中，
//2、表格B中，对应每条商品，输入数量。
//3、表格B中的商品不能重复，可以删除。
//4、能同时传入后台，更新到数据库
//5、或传入其他页面，并显示出来。
//js通过添加表的一行，删除一行。遍历表结构等方法实现
//可修改为其他功能：
//多条记录同时修改并且更新到数据库
Html代码
<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 delD
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
