js在table指定tr行上或下面添加tr行
function onAddTR(trIndex)
{
var tb = document.getElementById("tb1");
var newTr = tb.insertRow(trIndex);//添加新行，trIndex就是要添加的位置
var newTd1 = newTr.insertCell();
newTd1.innerHTML = "這是新行，位置：" + trIndex;
var newTd2 = newTr.insertCell();
newTd2.innerHTML = "這是新行，位置：" + trIndex;
}
<table style="width: 100%;" id="tb1">
<tr onclick="onAddTR(this)">
<td>1</td>
<td>2</td>
</tr>
<tr onclick="onAddTR(this)">
<td>3</td>
<td>4</td>
</tr>
</table>
<script type="text/javascript">
function onAddTR(trObj)
{
$(trObj).after("<tr onclick='onAddTR(this)'><td>這是新行</td><td></td><tr/>");
}
</script>
var table = document.getElementById("tableId");
table.innerHTML = table.innerHTML + "<tr>......</tr>";
table.rows // table 中所有行的集合
table.tBodies // table 中 tbody 中的所有行的集合
利用這兩個集合也可以做一些事情
另外 document.createElement("tr") 方法可以創建個空行出來，參數就是 tag 名
主要是取得本行tr，再調用after()或before()函數，在相應位置添加內容。
$(“#tab #tr1″).after(‘<tr><td>4</td></tr>’)
$(“#tab #tr1″).before(‘<tr><td>4</td></tr>’)
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
02
<script>
03
$(function(){
04
$("#getAtr").click(function(){
05
$str='';
06
$str+="<tr align='center'>";
07
$str+="<td><input type='text' name='advTitle[]'/></td>";
08
$str+="<td><input type='file' name='img[]' /></td>";
09
$str+="<td><input type='text' name='advContent[]' /></td>";
10
$str+="<td><input type='text' name='advSource[]' /></td>";
11
$str+="<td><input type='text' name='advAuthor[]' /></td>";
12
$str+="<td><input type='text' name='advPosition[]' /></td>";
13
$str+="<td onClick='getDel(this)'><a href='#'>刪除追加</a></td>";
14
$str+="</tr>";
15
$("#addTr").append($str);
16
});
17
});
18
19
function getDel(k){
20
$(k).parent().remove();
21
}
22
</script>
23
24
--------------------------------------------------------------------------------
25
html部分
26
<table align="center" border="1" cellpadding="0" cellspacing="0" width="100%">
27
<tr align="center">
28
<td>廣告名稱</td>
29
<td>廣告圖片</td>
30
<td>廣告內容</td>
31
<td>廣告來源</td>
32
<td>廣告作者</td>
33
<td>廣告描述</td>
34
<td align="center"><a href="#" id="getAtr">追加內容</a></td>
35
</tr>
36
<tbody id="addTr">
37
<tr align="center">
38
<td><input type="text" name="advTitle[]"/></td>
39
<td><input type="file" name="img[]" /></td>
40
<td><input type="text" name="advContent[]" /></td>
41
<td><input type="text" name="advSource[]" /></td>
42
<td><input type="text" name="advAuthor[]" /></td>
43
<td><input type="text" name="advPosition[]" /></td>
44
<td></td>
45
</tr>
46
</tbody>
47
<tr align="center">
48
<td colspan="5"><input type="submit" value="全部添加" /></td>
49
</tr>
50
</table>
=============================
function onAddTR(trIndex)
{
var tb = document.getElementById("tb1");
var newTr = tb.insertRow(trIndex);//添加新行，trIndex就是要添加的位置
var newTd1 = newTr.insertCell();
newTd1.innerHTML = "這是新行，位置：" + trIndex;
var newTd2 = newTr.insertCell();
newTd2.innerHTML = "這是新行，位置：" + trIndex;
}
<table style="width: 100%;" id="tb1">
<tr onclick="onAddTR(this)">
<td>1</td>
<td>2</td>
</tr>
<tr onclick="onAddTR(this)">
<td>3</td>
<td>4</td>
</tr>
</table>
<script type="text/javascript">
function onAddTR(trObj)
{
$(trObj).after("<tr onclick='onAddTR(this)'><td>這是新行</td><td></td><tr/>");
}
</script>
var table = document.getElementById("tableId");
table.innerHTML = table.innerHTML + "<tr>......</tr>";
table.rows // table 中所有行的集合
table.tBodies // table 中 tbody 中的所有行的集合
利用這兩個集合也可以做一些事情
另外 document.createElement("tr") 方法可以創建個空行出來，參數就是 tag 名
主要是取得本行tr，再調用after()或before()函數，在相應位置添加內容。
$(“#tab #tr1″).after(‘<tr><td>4</td></tr>’)
$(“#tab #tr1″).before(‘<tr><td>4</td></tr>’)
===============================================
var num=0;
var td="";
var text="";
var tr="";
function addNode(){
num++;
var table=document.getElementById("table");
tr=document.createElement("tr");
tr.id=num;
tr.setAttribute("align","center");
/*var name1=document.getElementById("name");
var name2=document.getElementById("age");
var name3=document.getElementById("sex");
var name4=document.getElementById("phone");
var name5=document.getElementById("address");*/
var name=document.getElementsByName("name");
//alert(name[2].value);
for(var i=0;i<=name.length-1;i++){
//alert(name[i].value);
var text=document.createTextNode(name[i].value);
td=document.createElement("td");
td.appendChild(text);
tr.appendChild(td);
}
td=document.createElement("td");
tr.appendChild(td);
tr.childNodes[5].innerHTML="<a href='xiugai.html'>修改</a>";
//alert(tr.childNodes.length);
table.appendChild(tr);
if(table.childNodes.length>=6){
//alert("開始分頁");
var div1=document.createElement("div");
var tr=document.createElement("tr");
var a=document.createElement("a");
a.href="#";
var td1=document.createElement("td");
//var td2=document.createElement("td");
//var td3=document.createElement("td");
//var td4=document.createElement("td");
var text1=document.createTextNode("下一頁");
//var text2=document.createTextNode("bbbbbb");
a.appendChild(text1);
//a.appendChild(text2);
td1.appendChild(a);
//td2.appendChild(a);
tr.appendChild(td1);
//tr.appendChild(td2);
//tr.appendChild(td2);
div1.appendChild(tr);
//div1.appendChild(tr);
document.body.appendChild(div1);
}
var len=table.childNodes.length;
//alert(Math.round(len/5));
}
/*function bian(){
var table=document.getElementById("table").childNodes;
//alert(table.length);
for(var i=0;i<table.length-1;i+=2){
table[i].style.background="red";
}
}*/
//bian();
function fenye(){
var table=document.getElementById("table").childNodes;
}
function ceshi(){
var num1=table.childNodes.length+1;
var num2=Math.round(num1/5);
//alert("一共有"+num2+"頁");
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="none";
}
//var td=document.getElmentsTagName("td");
//table.style.display="none";
}
function ceshi1(){
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="block";
}
}
function ceshi2(){
alert(document.getElementById("table").firstChild.firstChild.firstChild.id);
//alert(document.getElementById("table").firstChild.nodeName);
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="none";
}
for(var i=6;i<=10;i++){
table.childNodes[i].style.display="block";
}
for(var i=11;i<=15;i++){
table.childNodes[i].style.display="none";
}
}
function ceshi3(){
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="block";
}
for(var i=6;i<=10;i++){
table.childNodes[i].style.display="none";
}
for(var i=11;i<=15;i++){
table.childNodes[i].style.display="none";
}
}
</script>
</head>
<body>
<form>
姓名：<input type="text" id="name" name="name"/><p>
性別：<input type="text" id="sex" name="name"/><p>
年齡：<input type="text" id="age" name="name"/><p>
電話：<input type="text" id="phone" name="name"/><p>
地址：<input type="text" id="address" name="name"/><p>
<input type="button" value="添加" onclick="addNode()"/>
</form>
<table border="1" width="773" height="33" id="table"><tr style="">
<th width="137" height="27">姓名</th>
<th width="90">性別</th>
<th width="130">年齡</th>
<th width="227">電話</th>
<th width="155">地址</th>
<th width="155">操作</th>
</tr>
</table>
<input type="button" value="隱藏" onclick="ceshi()"/>
<input type="button" value="顯示" onclick="ceshi1()"/>
<input type="button" value="下一頁" onclick="ceshi2()"/>
<input type="button" value="上一頁" onclick="ceshi3()"/>
</body>
=========================================
function findObj(theObj, theDoc)
{
var p, i, foundObj;
if(!theDoc) theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
{ theDoc = parent.frames[theObj.substring(p+1)].document; theObj = theObj.substring(0,p); } 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 && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj,theDoc.layers[i].document); if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj); return foundObj;
}
//添加一個參與人填寫行
function AddSignRow(){ //讀取最后一行的行號，存放在txtTRLastIndex文本框中
var txtTRLastIndex = findObj("txtTRLastIndex",document);
var rowID = parseInt(txtTRLastIndex.value);
var signFrame = findObj("SignFrame",document);
//添加行
var newTR = signFrame.insertRow(signFrame.rows.length);
newTR.id = "SignItem" + rowID;
//添加列:序號
var newNameTD=newTR.insertCell(0);
//添加列內容
newNameTD.innerHTML = newTR.rowIndex.toString();
//添加列:姓名
var newNameTD=newTR.insertCell(1);
//添加列內容
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />";
//添加列:電子郵箱
var newEmailTD=newTR.insertCell(2);
//添加列內容
newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />";
//添加列:電話
var newTelTD=newTR.insertCell(3);
//添加列內容
newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />";
//添加列:手機
var newMobileTD=newTR.insertCell(4);
//添加列內容
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />";
//添加列:公司名
var newCompanyTD=newTR.insertCell(5);
//添加列內容
newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />";
//添加列:刪除按鈕
var newDeleteTD=newTR.insertCell(6);
//添加列內容
newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">刪除</a></div>";
//將行號推進下一行
txtTRLastIndex.value = (rowID + 1).toString() ;
}
//刪除指定行
function DeleteSignRow(rowid){
var signFrame = findObj("SignFrame",document);
var signItem = findObj(rowid,document);
//獲取將要刪除的行的Index
var rowIndex = signItem.rowIndex;
//刪除指定Index的行
signFrame.deleteRow(rowIndex);
//重新排列序號，如果沒有序號，這一步省略
for(i=rowIndex;i<signFrame.rows.length;i++){
signFrame.rows[i].cells[0].innerHTML = i.toString();
}
}//清空列表
function ClearAllSign(){
if(confirm('確定要清空所有參與人嗎？')){
var signFrame = findObj("SignFrame",document);
var rowscount = signFrame.rows.length;
//循環刪除行,從最后一行往前刪除
for(i=rowscount - 1;i > 0; i--){
signFrame.deleteRow(i);
}
//重置最后行號為1
var txtTRLastIndex = findObj("txtTRLastIndex",document);
txtTRLastIndex.value = "1";
//預添加一行
AddSignRow();
}
}
</script>
</HEAD>
<BODY>
<div>
<table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">
<tr id="trHeader">
<td width="27" bgcolor="#96E0E2">序號</td>
<td width="64" bgcolor="#96E0E2">用戶姓名</td>
<td width="98" bgcolor="#96E0E2">電子郵箱</td>
<td width="92" bgcolor="#96E0E2">固定電話</td>
<td width="86" bgcolor="#96E0E2">移動手機</td>
<td width="153" bgcolor="#96E0E2">公司名稱</td>
<td width="57" align="center" bgcolor="#96E0E2"> </td>
</tr>
</table>
</div>
<div>
<input type="button" name="Submit" value="添加參與人" onclick="AddSignRow()" />
<input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
</div>
</BODY>
</HTML>
============js操作html的table,包括添加行，添加列，刪除行，刪除列，合並單元格（未實現=======
var tabObj = document.getElementByIdx_x("printtable");
newRow.insertCell(g).innerHTML="頭部";
//tabObj.rows[0].cells[g].colsSpan =2;
//tabObj.rows[0].cells[g].rowsSpan =2;
tabObj.rows[1].cells[g].style.background="#CCCCCC";
tabObj.rows[0].cells[g].style.background="#CCCCCC";
//tabObj.rows[0].cells[g].rowSpan=2
tabObj.rows[0].cells[2].colSpan =2;
tabObj.rows[0].cells[2].innerHTML="反映形式";
tabObj.rows[0].cells[3].colSpan =2;
tabObj.rows[0].cells[3].innerHTML="待處理業務數";
tabObj.rows[0].cells[4].colSpan =1;
tabObj.rows[0].cells[4].innerHTML="反映形式";
tabObj.rows[0].cells[5].colSpan=1;
tabObj.rows[0].cells[5].innerHTML="反映形式";
tabObj.rows[0].cells[6].colSpan=7;
tabObj.rows[0].cells[6].innerHTML="";
tabObj.rows[0].cells[7].style.display = "none";
記 得以前面試的時候遇到過這樣一個問題：有一個表格，然后有４個輸入框，一個合並 按鈕，輸入框是這樣的，從第幾行到第幾行，從第幾列到第幾列，然后點擊按鈕，合並 。當時我從學校出來，js知識只是知道一些，根本做不到！現在想想，其實這個問題也還是考基礎功夫是否扎實！大家有興趣可以自己做做看，測下自己是不是能 夠做出來。題目的截圖：
第1/1列 第1/2列 第1/3列 第1/4列 第1/5列
第2/1列 第2/2列 第2/3列 第2/4列 第2/5列
第3/1列 第3/2列 第3/3列 第3/4列 第3/5列
第4/1列 第4/2列 第4/3列 第4/4列 第4/5列
第5/1列 第5/2列 第5/3列 第5/4列 第5/5列
第6/1列 第6/2列 第6/3列 第6/4列 第6/5列
第7/1列 第7/2列 第7/3列 第7/4列 第7/5列
第8/1列 第8/2列 第8/3列 第8/4列 第8/5列
第9/1列 第9/2列 第9/3列 第9/4列 第9/5列
從第 行到 行
從第 列到 列
現在做這個問題，看起來簡單，但我還是花了很長時間，可能是我的思路不對吧？主要就是用js來操作html，我現在實現了添加行，刪除行，添加列，刪除列 ，但合並單元格卻不能完整的實現 ，主要是表格會亂掉 。現在把這個問題發出來，有興趣的同仁可以自己在有空的時候研究下，看自己能不能做出來！主要是合並單元格的問題！也可以幫我看看合並單元格的問題。
我自己實現的部分代碼：
html部分 寫道
<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>
生成表格，采用appendChild 寫道
function init(){
_table=document.getElementById ("table");
_table.border="1px";
_table.width="800px";
for(var i=1;i<10;i++){
var row=document.createElement ("tr");
row.id=i;
for(var j=1;j<6;j++){
var cell=document.createElement ("td");
cell.id =i+"/"+j;
cell.appendChild(document.createTextNode ("第"+cell.id+"列"));
row.appendChild (cell);
}
document.getElementById("newbody").appendChild (row);
}
}
添加行，使用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=1;i<4;i++){
td.id=tr.id+"/"+i;
td.appendChild(document.createTextNode("第"+td.id+"列"));
tr.appendChild(td);
}
document.getElementById("newbody").appendChild (tr);
}
添加行的另一種方法insertRow 寫道
function addRow_withInsert(){
varrow=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=0;i<countCell;i++){
var cell=row.insertCell(i);
cell.innerHTML="新"+(rowCount)+"/"+(i+1)+"列";
cell.id=(rowCount)+"/"+(i+1);
}
}
刪除行，采用deleteRow(row Index) 寫道
/*刪除行，采用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=0;i<document.getElementById("table").rows.length;i++){
var cell=document.getElementById("table").rows[i].insertCell(2);
cell.innerHTML="第"+(i+1)+"/"+3+"列";
}
}
刪除列，采用deleteCell(列位置)的方法 寫道
/*刪除列，采用deleteCell(列位置)的方法*/
function removeCell(){
for(var i=0;i<document.getElementById("table").rows.length;i++){
document.getElementById("table").rows[i].deleteCell(0);
}
}
合並單元格（未實現） 寫道
我的代碼有問題，主要是表格會亂掉，一直沒有改好 ：
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=beginRow;x<=endRow;x++){
for(var i=beginCol;i<=endCol;i++){
if(x==beginRow){
document.getElementById("table").rows[x].deleteCell(i+1);
}
else{
document.getElementById("table").rows[x].deleteCell(i);
}
}
}
td.rowSpan=(endRow-beginRow)+1;
}
=========================
動態table添加colspan/rowspan 參數的方法（通過Js） .
分類： javascript CSS 2009-07-25 01:27 1160人閱讀 評論(0) 收藏 舉報
table
問題：動態的給某個表對象添加列屬性和行屬性，采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。
解 決方法：取得表對象，並取得他下面對應的行對象下的某個元素，這里如document.tableId.rows[i].cells[j]即取得表下第i 行下的第j個元素，然后document.tableId.rows[i].cells[j].colspan=n即可。
eg:
dempTHFirst為要增加行或列屬性的元素。
demoThFirst.colSpan=3;