js在table指定tr行上或底下添加tr行

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">&nbsp;</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;