<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>增加Table行</title>
</head>
<script>
function addRow(obj)
{
//添加一行
var newTr = testTbl.insertRow();
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '<input type=checkbox id="box4">';
newTd1.innerText= '新加行';
}
</script>
<body>
<table id="testTbl" border=1>
<tr id="tr1">
<td ><input type=checkbox id="box1"></td>
<td id="b">第一行</td>
</tr>
<tr id="tr2">
<td ><input type=checkbox id="box2"></td>
<td id="b">第二行</td>
</tr>
<tr id="tr3">
<td ><input type=checkbox id="box3"></td>
<td>第三行</td>
</tr>
</table>
<br />
<input type="button" id="add" onclick="addRow();" value="Add Row" />
</body>
</html>
<html>
<head>
<style>
TR {background-color: white; color: black; font-family: verdana; font-size: 20; font-weight: bold;}
</style>
<body style="font-family: verdana">
<h2>Table Editor</h2>
<br>
<h3>Single click to select a cell, alt-click to select a row</h3>
<br>
<div id=TableContainer>
<table id=TheTable border=1 style="border-collapse: collapse; table-layout: fixed">
<tbody>
<tr><td>Cell 1,1</td><td>Cell 1,2</td><td>Cell 1,3</td></tr>
<tr><td>Cell 2,1</td><td>Cell 2,2</td><td>Cell 2,3</td></tr>
<tr><td>Cell 3,1</td><td>Cell 3,2</td><td>Cell 3,3</td></tr>
</tbody>
</table>
</div>
<br><br><br>
<input id=ButtonAddRow style="width: 200px;" type=button value="Add Row" onclick="addRow()"><br>
<input id=ButtonRemoveRow style="width: 200px;" type=button value="Remove Row" onclick="removeRow()"><br>
<input id=ButtonAddCell style="width: 200px;" type=button value="Add Cell" onclick="addCell()"><br>
<input id=ButtonRemoveCell style="width: 200px;" type=button value="Remove Cell" onclick="removeCell()"><br>
<input id=ButtonMoveUp style="width: 200px;" type=button value="Move Up" onclick="moveUp()"><br>
<input id=ButtonMoveDown style="width: 200px;" type=button value="Move Down" onclick="moveDown()"><br>
<input id=ButtonMoveLeft style="width: 200px;" type=button value="Move Left" onclick="moveLeft()"><br>
<input id=ButtonMoveRight style="width: 200px;" type=button value="Move Right" onclick="moveRight()"><br>
<input id=ButtonEditContents style="width: 200px;" type=button value="Edit Contents" onclick="editContents();">
<input type=text style="display: none; width: 400px;" id=EditCell><br>
<input id=ButtonEditStyle style="width: 200px;" type=button value="Edit Table Style" onclick="editStyle();">
<input type=text style="display: none; width: 400px;" id=EditStyle><br>
<script>
var lastSelection = null;
ButtonAddRow.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveRow.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonAddCell.setExpression("disabled", "nothingSelected(lastSelection)");
ButtonRemoveCell.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveUp.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveDown.setExpression("disabled", "! rowSelected(lastSelection)");
ButtonMoveLeft.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonMoveRight.setExpression("disabled", "! cellSelected(lastSelection)");
ButtonEditContents.setExpression("disabled", "(! cellSelected(lastSelection)) || (EditCell.style.display == '')");
ButtonEditStyle.setExpression("disabled", "(EditStyle.style.display == '')");
ButtonEditStyle.setExpression("value", "'Edit ' + whatIsSelected(lastSelection) + ' Style'");
function select(element) {
var e, r, c;
if (element == null) {
e = window.event.srcElement;
} else {
e = element;
}
if ((window.event.altKey) || (e.tagName == "TR")) {
r = findRow(e);
if (r != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(r);
lastSelection = r;
}
} else {
c = findCell(e);
if (c != null) {
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
}
selectRowOrCell(c);
lastSelection = c;
}
}
window.event.cancelBubble = true;
}
TableContainer.onclick = select;
function cancelSelect() {
if (window.event.srcElement.tagName != "BODY")
return;
if (lastSelection != null) {
deselectRowOrCell(lastSelection);
lastSelection = null;
}
}
document.onclick = cancelSelect;
function findRow(e) {
if (e.tagName == "TR") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findRow(e.parentElement);
}
}
function findCell(e) {
if (e.tagName == "TD") {
return e;
} else if (e.tagName == "BODY") {
return null;
} else {
return findCell(e.parentElement);
}
}
function deselectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "";
r.runtimeStyle.color = "";
//r.runtimeStyle.fontFamily = "Verdana";
}
function selectRowOrCell(r) {
r.runtimeStyle.backgroundColor = "darkblue";
r.runtimeStyle.color = "white";
//r.runtimeStyle.fontFamily = "Verdana";
}
function addRow() {
var r, p, nr;
if (lastSelection == null) {
r = null;
p = TheTable.children[0];
} else {
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
}
p = r.parentElement;
}
nr = document.createElement("TR");
p.insertBefore(nr, r);
select(nr);
addCell();
return nr;
}
function removeRow() {
var r, p, nr;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
}
p = r.parentElement;
p.removeChild(r);
lastSelection = null;
return r;
}
function addCell() {
var r, p, c, nc, text;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName == "TD") {
r = r.parentElement;
c = lastSelection;
} else {
c = null;
}
nc = document.createElement("TD");
text = document.createTextNode("New Cell");
nc.insertBefore(text, null);
r.insertBefore(nc, c);
select(nc);
return nc;
}
function removeCell() {
var c, p, nr;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
p = c.parentElement;
p.removeChild(c);
lastSelection = null;
return c;
}
function editContents() {
var c, p, nr;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
EditCell.style.display = "";
EditCell.value = c.innerHTML;
c.setExpression("innerHTML", "EditCell.value");
EditCell.focus();
EditCell.onblur = unhookContentsExpression;
}
function unhookContentsExpression() {
lastSelection.removeExpression("innerHTML");
EditCell.value = '';
EditCell.style.display = "none";
}
function editStyle() {
var c;
if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}
EditStyle.style.display = "";
EditStyle.value = c.style.cssText;
c.style.setExpression("cssText", "EditStyle.value");
EditStyle.focus();
EditStyle.onblur = unhookStyleExpression;
}
function unhookStyleExpression() {
var c;
if (lastSelection == null) {
c = TheTable;
} else {
c = lastSelection;
}
c.style.removeExpression("cssText");
EditStyle.value = '';
EditStyle.style.display = "none";
}
function moveUp() {
var r, p, ls;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName != "TR") {
return null;
}
if (r.rowIndex == 0)
return;
ls = r.previousSibling;
p = ls.parentElement;
p.insertBefore(r, ls);
return r;
}
function moveDown() {
var r, p, ls;
if (lastSelection == null)
return false;
r = lastSelection;
if (r.tagName != "TR") {
return null;
}
ls = r.nextSibling;
if (ls == null)
return null;
p = ls.parentElement;
ls = ls.nextSibling;
p.insertBefore(r, ls);
return r;
}
function moveLeft() {
var c, p, ls;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
ls = c.previousSibling;
if (ls == null)
return null;
p = ls.parentElement;
p.insertBefore(c, ls);
return c;
}
function moveRight() {
var c, p, ls;
if (lastSelection == null)
return false;
c = lastSelection;
if (c.tagName != "TD") {
return null;
}
ls = c.nextSibling;
if (ls == null)
return null;
p = ls.parentElement;
ls = ls.nextSibling;
p.insertBefore(c, ls);
return c;
}
function nothingSelected() {
return (lastSelection == null);
}
function rowSelected() {
var c;
if (lastSelection == null)
return false;
c = lastSelection;
return (c.tagName == "TR")
}
function cellSelected() {
var c;
if (lastSelection == null)
return false;
c = lastSelection;
return (c.tagName == "TD")
}
function whatIsSelected() {
if (lastSelection == null)
return "Table";
if (lastSelection.tagName == "TD")
return "Cell";
if (lastSelection.tagName == "TR")
return "Row";
}
</script>
增删Demo：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>function add(){
var tab = document.getElementById('tab');
if(tab){
var tr = document.createElement('tr');
var td = document.createElement('td');
var td1 = document.createElement('td');
td.innerHTML ='cccc';
td.style.border = '1px red solid';
td1.innerHTML ='dddd';
td1.style.border = '1px red solid';
tr.appendChild(td);
tr.appendChild(td1);
tab.childNodes[0].appendChild(tr);
}
}
function del(){
var tab = document.getElementById('tab');
if(tab.childNodes[0].lastChild){
tab.childNodes[0].removeChild(tab.childNodes[0].lastChild);
}}
</script>
</HEAD> <BODY >
<table id='tab' style='border:1px red solid'>
<tr>
<td style='border:1px red solid'>aaa</td>
<td style='border:1px red solid'>bbb</td>
</tr>
</table> <input type=button value=add onclick='add()'/>
<input type=button value=del onclick='del()'/>
</BODY>
</HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
<!--
.style1 {
font-size: 18px;
font-weight: bold;
}
td,div {
font-size: 12px;
}
.bd {
border-top:#000000 1px solid;
border-left:#000000 1px solid;
border-right:#000000 1px solid;
border-bottom:#000000 1px solid;
}
-->
</style>
<script>
var rowNum = 1;
function addRow() {
tr = document.all.theData.insertRow();
tr.height='20';
tr.style.background="#FFFFFF";
td0 = tr.insertCell();
td0.align="center";
td0.insertAdjacentHTML("afterBegin",(rowNum+1));
td1 = tr.insertCell();
td1.insertAdjacentHTML("afterBegin","<input name='t11" + rowNum + "' type='text' size='12' class='bd'>");
td2 = tr.insertCell();
td2.insertAdjacentHTML("afterBegin","<input name='t200" + rowNum + "' type='text' size='12' class='bd'>");
td3 = tr.insertCell();
td3.insertAdjacentHTML("afterBegin","<input name='t20" + rowNum + "' type='text' size='20' class='bd'>");
td4 = tr.insertCell();
td4.insertAdjacentHTML("afterBegin","<input name='t27" + rowNum + "' type='text' size='20' class='bd'>");
td5 = tr.insertCell();
td5.insertAdjacentHTML("afterBegin","<input name='t29" + rowNum + "' type='text' size='20' class='bd'>");
rowNum += 1;
}
function allSub() {
document.all.rowNum.value = rowNum;
form1.submit();
}
</script>
</HEAD>
<BODY>
<form name="form1" method="post" action="allSave.jsp">
<table width="700" id='theData' border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#d6dff7">
<tr align="center" bgcolor="#FFFFFF">
<td height="30" colspan="7"><span class="style1">工程合同段</span></td>
</tr>
<tr align="center" bgcolor="#0099FF">
<td width="32" height="20">序号</td>
<td width="100" height="20">工程编号</td>
<td width="101" height="20">合同段号</td>
<td width="169" height="20">合同段名称</td>
<td width="147" height="20">建设地点</td>
<td width="144" height="20">建设规模</td>
</tr>
<tr bgcolor='#FFFFFF'>
<td height='20' align="center" bgcolor="#FFFFFF">1</td>
<td height='20'><input name='t110' type='text' size='12' class='bd'></td>
<td height='20'><input name='t2000' type='text' size='12' class='bd'></td>
<td height='20'><input name='t200' type='text' size='20' class='bd'></td>
<td height='20'><input name='t270' type='text' size='20' class='bd'></td>
<td height='20'><input name='t290' type='text' size='20' class='bd'></td>
</tr>
</table>
<table width="700" border="0" align="center" cellpadding="0" cellspacing="1">
<tr align="center" bgcolor="#FFFFFF">
<td width="694" height="20"><input type="button" name="asdsa" value="加一行" onClick="addRow()">
<input type="button" name="ss" value="批量提交" onClick="allSub()"><input type="hidden" name="rowNum" value=""></td>
</tr>
</table>
</form>
</BODY>
</HTML>希望对你有帮助哦
^_*