jsp动态添加表格

jsp动态添加表格,第1张

参考参考。。。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>js *** 作表格</title>

<script language="javascript">

/*生成表格,采用appendChild*/

function init(){

_table=document.getElementById("table")

_table.border="1px"

_table.width="800px"

for(var i=1i<10i++){

var row=document.createElement("tr")

row.id=i

for(var j=1j<6j++){

var cell=document.createElement("td")

cell.id=i+"/"+j

cell.appendChild(document.createTextNode("第"+cell.id+"列"))

row.appendChild(cell)

}

document.getElementById("newbody").appendChild(row)

}

}

function rebulid(){

var beginRow=document.getElementById("beginRow").value/*开始行*/

var endRow=document.getElementById("endRow").value/*结束行*/

var beginCol=document.getElementById("beginCol").value/*开始列*/

var endCol=document.getElementById("endCol").value/*结束列*/

var tempCol=beginRow+"/"+beginCol/*定位要改变属性的列*/

alert(tempCol)

var td=document.getElementById(tempCol)

/*删除要合并的单元格*/

for(var x=beginRowx<=endRowx++){

for(var i=beginColi<=endColi++){

if(x==beginRow){

document.getElementById("table").rows[x].deleteCell(i+1)

}

else{

document.getElementById("table").rows[x].deleteCell(i)

}

}

}

td.rowSpan=(endRow-beginRow)+1

}

/*添加行,使用appendChild方法*/

function addRow(){

var length=document.getElementById("table").rows.length

/*document.getElementById("newbody").insertRow(length)

document.getElementById(length+1).setAttribute("id",length+2)*/

var tr=document.createElement("tr")

tr.id=length+1

var td=document.createElement("td")

for(i=1i<4i++){

td.id=tr.id+"/"+i

td.appendChild(document.createTextNode("第"+td.id+"列"))

tr.appendChild(td)

}

document.getElementById("newbody").appendChild(tr)

}

function addRow_withInsert(){

var row=document.getElementById("table").insertRow(document.getElementById("table").rows.length)

var rowCount=document.getElementById("table").rows.length

var countCell=document.getElementById("table").rows.item(0).cells.length

for(var i=0i<countCelli++){

var cell=row.insertCell(i)

cell.innerHTML="新"+(rowCount)+"/"+(i+1)+"列"

cell.id=(rowCount)+"/"+(i+1)

}

}

/*删除行,采用deleteRow(row Index)*/

function removeRow(){

/* var row=document.getElementById("2")

var index=row.rowIndex

alert(index)*/

document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex)

}

/*添加列,采用insertCell(列位置)方法*/

function addCell(){

/*document.getElementById("table").rows.item(0).cells.length

用来获得表格的列数

*/

for(var i=0i<document.getElementById("table").rows.lengthi++){

var cell=document.getElementById("table").rows[i].insertCell(2)

cell.innerHTML="第"+(i+1)+"/"+3+"列"

}

}

/*删除列,采用deleteCell(列位置)的方法*/

function removeCell(){

for(var i=0i<document.getElementById("table").rows.lengthi++){

document.getElementById("table").rows[i].deleteCell(0)

}

}

</script>

</head>

<body onLoad="init()">

<table id="table" align="center">

<tbody id="newbody"></tbody>

</table>

<div>

<table width="800px" border="1px" align="center">

<tr><td align="center"><input type="button" id="addRow" name="addRow" onClick="addRow()" value="添加行"/></td><td align="center"><input type="button" id="delRow" name="delRow" onClick="removeRow()" value="删除行"/></td></tr>

<tr><td align="center"><input type="button" id="delCell" name="delCell" onClick="removeCell()" value="删除列"/></td><td align="center"><input type="button" id="addCell" name="addCell" onClick=" addCell()" value="添加列"/></td></tr>

 <tr><td align="center" colspan="2"><input type="button" id="addRows" name="addRows" onClick="addRow_withInsert()" value="添加行"/></td></tr>

</table>

</div>

<div>

<table width="800px" border="1px" align="center">

<tr><td>从第<input type="text" id="beginRow" name="beginRow" value=""/>行到<input type="text" name="endRow" id="endRow" value=""/>行</td><td rowspan="2" id="test"><input type="button" name="hebing" id="hebing" value="合并" onClick="rebulid()"/></td></tr>

<tr><td>从第<input type="text" name="beginCol" id="beginCol" value=""/>列到<input type="text" name="endCol" id="endCol" value=""/>列</td></tr>

</table>

</div>

</body>

</html>

你可以在《物证材料信息的表格》外面套一个div,获取这个div的innerHTML,加入到下面即可;

只设置name,不要加id了;后台通过name获取数组。

后台循环数组添加即可


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11566646.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存