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

来源：https://www.cnblogs.com/caicaizi/p/4952551.html

标签

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!