首页 > 代码库 > JS控制TABLE表格在任意一行下面添加一行（有待完善）

JS控制TABLE表格在任意一行下面添加一行（有待完善）

2024-08-26 07:19:17   221人阅读

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>

<script language="javascript">
//动态添加删除table行
var rowIndex = 0;
aaa=function(id){return (typeof(id)==‘object‘)?id:document.getElementById(id);}
function add() {
var row=aaa("tb").insertRow(aaa("tb").rows.length);
col0 = row.insertCell(0);
col1 = row.insertCell(1);
col2 = row.insertCell(2);

col0.width="300px"; //控制TD样式




//向TD插入内容
col0.innerHTML ="<tr name=‘btn‘ index=\""+ rowIndex +"\">" +
"<input id=‘work1"+rowIndex+"‘ value=http://www.mamicode.com/‘"+rowIndex+"‘ name=‘work1"+rowIndex+"‘ type=‘text‘ class=‘work1‘/>";
col1.innerHTML ="<input type=‘button‘ value=http://www.mamicode.com/‘添加‘ onclick=/"return AddRow(‘row" + rowIndex +"‘)\">";
col2.innerHTML ="<input type=‘button‘ value=http://www.mamicode.com/‘删除‘ onclick=/"return DeleteRow(‘row" + rowIndex +"‘)\"></tr>";
row.setAttribute("id", "row" + rowIndex);
row.setAttribute("name", "row" + rowIndex);
rowIndex++;
}
function DeleteRow(rowTag){ //删除
var i = aaa("tb").rows[rowTag].rowIndex;
//alert(i);
//alert(rowIndex);
var j;
//for(j=i;j<=rowIndex;j++) {
//$("tb").rows[j].index--;
//}
aaa("tb").deleteRow(i);
rowIndex--;
}
function getRow(){

}
function AddRow(rowTag){ //删除
var i = aaa("tb").rows[rowTag].rowIndex;
//alert(rowIndex);
for(var j=rowIndex; j>i+1; j--){
var p=j-1;
var nnn="work1"+j;
var mmm="row"+j;
document.getElementById(‘work1‘+p).id=nnn;
//row.setAttribute("id", "row" + y);

}

var x=i+1;
alert(x);
var row=aaa("tb").insertRow(i+1);
col0 = row.insertCell(0);
col1 = row.insertCell(1);
col2 = row.insertCell(2);

col0.width="300px"; //控制TD样式

//向TD插入内容
col0.innerHTML ="<tr name=‘btn‘ index=\""+ x +"\">" +
"<input id=‘work1"+x+"‘ value=http://www.mamicode.com/‘"+x+"‘ name=‘work1‘ type=‘text‘ class=‘work1‘/>";
col1.innerHTML ="<input type=‘button‘ value=http://www.mamicode.com/‘添加‘ onclick=/"return AddRow(‘row" + x +"‘)\">";
col2.innerHTML ="<input type=‘button‘ value=http://www.mamicode.com/‘删除‘ onclick=/"return DeleteRow(‘row" + x +"‘)\"></tr>";
row.setAttribute("id", "row" + x);
row.setAttribute("name", "row" + x);
rowIndex++;
}

var TrArray1 = new Array();
var TrArray2 = new Array();
function getDongtai(){ //获取动态列表值到域
var itemsLength = rowIndex;//行数
//alert("itemsLength"+itemsLength);
//第一列
var sum="";
for (var i = 0; i < itemsLength; i++) {
//TrArray1[i] =document.getElementsByClassName(‘work1‘)[i].value;
TrArray1[i] =document.getElementById(‘work1‘+i).value;
//sum.push(TrArray1[i]);
sum = sum + TrArray1[i]+"*";
}
alert(TrArray1);
}

function showTable(){ //审批、结束环节的展示
//第一列
//var text1=document.getElementById("Text1").value;
var showTd1= new Array();

//第二列
//var text2=document.getElementById("Text2").value;
var showTd2= new Array();
//var tbHTML1 = "<table><tbody>";
//for(var i=0;i<showTd1.length - 1;i++){
//tbHTML1=tbHTML1+"<tr><td>"+showTd1[i]+"</td><td>"+showTd2[i]+"</td></tr>";
//}
//tbHTML1=tbHTML1+"</table></tbody>";
//alert(tbHTML1);
//document.getElementById("#{id:tb1}").value = http://www.mamicode.com/tbHTML1;

for(var i=0;i<TrArray1.length;i++){
var row=aaa("tb1").insertRow(aaa("tb1").rows.length);
col0 = row.insertCell(0);
col1 = row.insertCell(1);
//col2 = row.insertCell(2);

col0.width="300px"; //控制TD样式
col1.width="300px";
col0.style.wordWrap="break-word";
col1.style.wordWrap="break-word";
col0.style.fontSize="18px";
col1.style.fontSize="18px";
col0.style.fontFamily="FangSong";
//向TD插入内容
col0.innerHTML ="<tr name=‘btn‘ index=\""+ i +"\">" +
"<td id=‘wan1"+i+"‘>"+TrArray1[i]+"</td>";
col1.innerHTML ="<td>"+TrArray2[i]+"</td></tr>";
row.setAttribute("id", "row" + i);
row.setAttribute("name", "row" + i);

}

}
//style="position:absolute ;top:-1px;left:0px;border-collapse:collapse;"
</script>

</head>
<body>
<p>
<input name="btnAddLine" type="button" id="btnAddLine" onClick="return add()" value="http://www.mamicode.com/加入一行">
<input name="btnAddLine1" type="button" id="haha" onClick="return getDongtai()" value="http://www.mamicode.com/取数">
<input name="btnAddLine2" type="button" id="haha1" onClick="return showTable()" value="http://www.mamicode.com/show">
</p>
<table border="" cellspacing="" cellpadding="">
<tr>
<td>
<div>
<table name="tb" id="tb" >

</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="one" style=" width:1030px;height:auto;min-height:50px;padding-top:0px;overflow:auto;" >
<table frame="void" border="1" cellspacing="0" cellpadding="0" bordercolor="black" name="tb1" id="tb1" width="1030px" style="border-collapse:collapse; ">

</table>
</div>
</td>
</tr>
</table>


</body>
</html>

JS控制TABLE表格在任意一行下面添加一行（有待完善）


联系
我们