js-表格(table)添加列、删除列

</td>
<td>
<textarea rows="4"id=""style="width: 150px; height: 40px;"></textarea>
</td>
</tr>
</table>
<table cellpadding="1"cellspacing="0"bordercolor="#A3C0E8"border="1"style="text-align: center">
vartxtTRLastIndex = findObj("txtTRLastIndex", document);
varrowID = parseInt(txtTRLastIndex.value);
vartab = findObj("tab", document);
varcolumnLength = tab.rows[0].cells.length;
oTd.id = "column"+ columnID;
oTd.innerHTML = "<textarea id='' rows='4' style='width:150; height:40px;'></textarea>";
}
}
}
//添加一个行
varindex = 1;
function AddNewRow() {
//获取将要删除的行的Index
varrowIndex = signItem.rowIndex;
//删除指定Index的行
tab.deleteRow(rowIndex);
//重新排列序号，如果没有序号，这一步省略
for(i = 2; i < tab.rows.length; i++) {
tab.rows[i].cells[0].innerHTML = i - 1;
varoTd = tab.rows[1].insertCell(columnLength);
oTd.innerHTML = "<div style='background: #D3E6FE;width=100%;'>"+ (++count) + "</div>";
} elseif(i > 1) {
varoTd = tab.rows[i].insertCell(columnLength);
AddNewRow();
//}
}
</script>
二、HTML部分：
?
<div style="overflow: auto; height: 350px; width: 860px; padding: 10px;">
<table cellpadding="1"id="tab"cellspacing="0"bordercolor="#A3C0E8"border="1"
</td>
</tr>
</table>
</div>
style="text-align: center">
<tr id="tr1">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr id="trHeader">
<td style="background: #D3E6FE">
NO
</td>
<td style="background: #D3E6FE">
<input type="button"name="Submit"value="新增列"onclick="AddNewColumn()"/>
</td>
<td style="background: #D3E6FE">
<input type="button"name="Submit2"value="全部清空"onclick="ClearAllSign()"/>
if((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
theDoc = parent.frames[theObj.substring(p + 1)].document; theObj = theObj.substring(0, p);
}
theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj, theDoc.layers[i].document);
if(!foundObj && document.getElementById)
foundObj = document.getElementById(theObj); returnfoundObj;
</td>
<td style="background: #D3E6FE">
<input name='txtTRLastIndex'type='hidden'id='txtTRLastIndex'value="1"/>
<input name='txtTDLastIndex'type='hidden'id='txtTDLastIndex'value="4"/>
<input id='textItem0'type='text'style="border: 0px"size='12'/>
</td>
<td>
<input id='checkItem0'type='text'style="border: 0px"size='12'/>
</td>
<td>
<input id='stand0'type='text'style="border: 0px"size='12'/>
}
//添加一个列
count = 1;
function AddNewColumn() {
vartxtTDLastIndex = findObj("txtTDLastIndex", document);
varcolumnID = parseInt(txtTDLastIndex.value);
vartab = document.getElementById("tab");
试验项目
</td>
<td style="background: #D3E6FE">
检验项目
</td>
<td style="background: #D3E6FE">
标准
</td>
<td style="background: #D3E6FE">
1
</td>
</tr>
<tr>
<td>
1
</td>
<td>
js-表格(table)添加列、删除列
功能图片截图如下：
一、Js代码如下：
?
<script language="javascript"type="text/javascript">
function findObj(theObj, theDoc) {
varp, i, foundObj;
if(!theDoc) theDoc = document;
for(i = rowscount - 1; i > 1; i--) {
tab.deleteRow(i);
}
//重置最后行号为1
vartxtTRLastIndex = findObj("txtTRLastIndex", document);
txtTRLastIndex.value = "1";
//预添加一行
}
--index
}
//删除指定列
function DeleteSignColumn(columnId) {
vartab = document.getElementById("tab");
varcolumnLength = tab.rows[1].cells.length;
//删除指定单元格
for(vari = 0; i < tab.rows.length; i++) {
tab.rows[i].deleteCell(columnId);
}
//重新排列序号，如果没有序号，这一步省略
varcolumn = columnLength - 4;
for(varj = 1; j < column; j++) {
tab.rows[1].cells[j + 3].innerHTML = "<div style='background: #D3E6FE;width=100%;'>"+ j + "</div>";
<tr>
<td style="background: #D3E6FE">
</td>
<td style="background: #D3E6FE">
<input type="button"name="Submit"value="新增行"onclick="AddNewRow()"/>
</td>
<td style="background: #D3E6FE">
//将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString();
}
//删除指定行
function DeleteSignRow(rowid) {
vartab = findObj("tab", document);
varsignItem = findObj(rowid, document);
//添加行
varnewTR = tab.insertRow(tab.rows.length);
newTR.id = "SignItem"+ rowID;
for(vari = 0; i < columnLength; i++) {
if(i == 0) {//第一列:序号
newTR.insertCell(0).innerHTML = ++index;
varrowLength = tab.rows.length;
varcolumnLength = tab.rows[1].cells.length;
for(vari = 0; i < rowLength; i++) {
if(i == 0) {
varoTd = tab.rows[0].insertCell(columnLength);
if(!(foundObj = theDoc[theObj]) && theDoc.all)
foundObj = theDoc.all[theObj]; for(i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for(i = 0; !foundObj &&
oTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignColumn("+ (++columnID) + ")\">删除</a></div>";
} elseif(i == 1) {//第一列:序号
}
}
//添加列:删除按钮
varlastTd = newTR.insertCell(columnLength);
lastTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignRow('SignItem"+ rowID + "')\">删除</a></div>";
}
--count;
}
//清空列表
function Clea百度文库AllSign() {
//if (confirm('确定要清空所有吗？')) {
index = 0;
vartab = findObj("tab", document);
varrowscount = tab.rows.length;
//循环删除行,从最后一行往前删除
} elseif(i > 0 && i < 4) {
newTR.insertCell(i).innerHTML = "<input id='textItem0' type='text' style='border: 0px' size='12' />";
}
elseif(i >= 4) {
newTR.insertCell(i).innerHTML = "<textarea id='' rows='4' style='width:150; height:40px;'></textarea>";