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;
