js添加行删除行，遍历table<转载自fly533> -

leyoo

浏览: 43638 次
性别:
来自: 北京

最近访客更多访客>>

xuwoool

tommy_lu

zjqian908

fcr1209973

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js添加行删除行，遍历table<转载自fly533>

J#数据结构 Web

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 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>";
            }
        }
    }
    jsonStrjsonStr=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;
        aa=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>
<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>

分享到：