在JSP頁面用JS增加TABLE行及刪除行

原创 2007年10月15日 11:55:00

<button onClick="add()">add</button>
<button onClick="del()">del</button>
<button onClick="test()">test</button>
<table id="t1" border="1"></table>
<script language="JavaScript">
var n=0;
function add(){
n++;
t1.insertRow().insertCell().innerHTML = '<input type="radio" name="tt"><input name="test'+n+'"><button onclick="deleteRow(this)">delthis</button>';
//t1.insertRow().insertCell().innerHTML = '<input type="radio" name="tt"><input name="test'+t1.rows.length+'">';
}
function del(){
 var c = document.getElementsByName('tt');
 for(var i=0; i<c.length; i++)
 if(c[i].checked)
 t1.deleteRow(i);
}
function deleteRow(obj){
 alert(obj.parentElement.parentElement.parentElement.parentElement.id);
 alert(obj.parentElement.parentElement.rowIndex);
//t1.deleteRow(obj.parentElement.parentElement.rowIndex);
}
function test(){
for(i=0;i<t1.rows.length;i++) alert(t1.rows[i].cells[0].innerHTML);
}
</SCRIPT>

 

<html>
<body>
<form id="myForm">
<table id="table1">
 <tr id="tr1">
  <td id="td1">
<input id="myButton"
       type="button" value="Show my parent" onclick="function1();">
      </td>
    </tr>
  </table>
</form>
<script language="JavaScript">
    function function1() {
        var m = document.all.myButton.parentElement.parentElement.parentElement.parentElement.id;
        alert("Parent element: <FORM>, ID = "+'"'+m+'"');
    }
</script>
cloneNode()方法克隆表格:
<input type=button value=clone name=ok onclick=add()>
<table border=1>
<tr id=a1 name=a1>
<td><input></td><td><input></td>
</tr>
</table>
<script language=JavaScript>
i=1
function add(){
++i;
var newTR = a1.cloneNode(true);
newTR.id="a"+i;
newTR.name="a"+i;
a1.parentNode.insertAdjacentElement("beforeEnd",newTR);
//alert(a1.parentElement.innerHTML);
}
</script>

appendChild() & removeChild()方法:(firefox only)
<div id="oTest">1234 </div>
<button onclick="oT=document.getElementById('oTest');oS=document.createElement('span');oS.textContent='1234 ';oT.appendChild(oS)">append +</button><button onclick="oT=document.getElementById('oTest');oT.removeChild(oT.lastChild)">remove -</button>

2.

 

  <html>
<base href="[url]http://localhost:8080/web/planAndLog/userWorkLog/selectUserWorkLog.jsp[/url]">
<head>
<title></title>
<SCRIPT language="JavaScript">
var tempRow=0;
var maxRows=0;
function insertRows(){
tempRow=table1.rows.length-1;
maxRows=tempRow;
tempRow=tempRow+1;
var Rows=table1.rows;//类似数组的Rows
var newRow=table1.insertRow(table1.rows.length);//插入新的一行
var Cells=newRow.cells;//类似数组的Cells
for (i=0;i<3;i++)//每行的7列数据
{
var newCell=Rows(newRow.rowIndex).insertCell(Cells.length);
newCell.align="center";
switch (i)
{
case 0 : newCell.innerHTML="<td valign=&#39;top&#39;><input name=&#39;detailObject.seq&#39; id=&#39;_Seq&#39; type=&#39;text&#39; size=&#39;2&#39; maxlength=&#39;2&#39; value=&#39;"+tempRow+"&#39;></td>";break;
case 1 : newCell.innerHTML="<td valign=&#39;top&#39;><select name=&#39;detailObject.xmxh&#39; id=&#39;_Xmxh&#39;><option value=&#39;&#39; selected=&#39;selected&#39;></option><option value=&#39;XMXH20060713150418343&#39;>测试项目1</option><option value=&#39;XMXH20060725140312843&#39;>能源部测试项目</option><option value=&#39;XMXH20060801143744796&#39;>345fdhdfhfghgfjbc</option></select></TD>"; break;
case 2 : newCell.innerHTML="<td valign=&#39;top&#39;><a href=&#39;javascript:delTableRow(/""+tempRow+"/")&#39;>删除</a></TD>"; break;
}
}
maxRows+=1;
}
function delTableRow(rowNum){
if (table1.rows.length >rowNum){
table1.deleteRow(rowNum);
}
}
</SCRIPT>
</head>
<body>
<form action="">
<table border="0" cellspacing="0" cellpadding="0" width="98%" align="center">
<tr valign="top">
<th>
<input value="添加" type="button" onclick="insertRows()">
</th>
</tr>
</table>
<br />
<table border="1" width="98%" align="center" id="table1">
<tr>
<th >顺序号</th>
<th >项目序号</th>
<th>删除<th>
</tr>
</table>
</form>
</body>
</html>

js操作 添加删除table行,并进行刷新

添加行的js如下  table 的id为myTable 添加table的一行内容  function insertRow() {             var rowValue = docum...
  • luckysiesteven
  • luckysiesteven
  • 2015年01月22日 09:54
  • 4176

js在指定的table行后添加新行(js实现select数据的填充,添加行,删除行)

无标题文档         body{width:900px; height:600px;margin: 0px auto; }       body,ul,table,li,pre,dd,d...
  • a815899718
  • a815899718
  • 2015年01月08日 18:37
  • 1816

js 对表格的动态操作(动态添加行,删除该行,在指定位置添加控件)

***************************************************************** js动态添加表的列,并在列中添加控件的方法 添加行 func...
  • judyge
  • judyge
  • 2015年12月13日 13:44
  • 1624

table JS 添加行和删除行

  • 2014年06月07日 10:00
  • 1KB
  • 下载

js实现table添加行tr、删除行tr、清空行tr

//得到选中行对象 function findObj(theObj, theDoc) { var p, i, foundObj; if(!theDoc) theDoc = document; ...
  • u011781769
  • u011781769
  • 2014年08月22日 09:15
  • 3944

js操作html的table,包括添加行,添加列,删除行,删除列

记得以前面试的时候遇到过这样一个问题:有一个表格,然后有4个输入框,一个合并 按钮,输入框是这样的,从第几行到第几行,从第几列到第几列,然后点击按钮,合并 。当时我从学校出来,js知识只是知道一些,根...
  • zb0567
  • zb0567
  • 2014年08月07日 03:01
  • 365

js操作html的table,包括添加行,添加列,删除行,删除列,合并单元格(未实现,可参考代码)

记得以前面试的时候遇到过这样一个问题:有一个表格,然后有4个输入框,一个合并 按钮,输入框是这样的,从第几行到第几行,从第几列到第几列,然后点击按钮,合并 。当时我从学校出来,js知识只是知道一些,根...
  • middlekingt
  • middlekingt
  • 2012年09月14日 10:38
  • 2781

【转】js操作html的table,包括添加行,添加列,删除行,删除列,合并单元格(未实现)

转自:http://www.cnblogs.com/greatverve/archive/2009/07/02/1515192.html js操作表格 /*生成表格,采用appendChi...
  • shampire
  • shampire
  • 2014年04月01日 10:46
  • 985

js操作html的table,包括添加行,添加列,删除行,删除列

记得以前面试的时候遇到过这样一个问题:有一个表格,然后有4个输入框,一个合并 按钮,输入框是这样的,从第几行到第几行,从第几列到第几列,然后点击按钮,合并 。当时我从学校出来,js知识只是知道一些,根...
  • shangzhiliang_2008
  • shangzhiliang_2008
  • 2014年11月07日 16:24
  • 577

js在指定的table行后添加新行(js实现select数据的填充,添加行,删除行)

无标题文档         body{width:900px; height:600px;margin: 0px auto; }       body,ul,table,li,pre,dd,d...
  • a815899718
  • a815899718
  • 2015年01月08日 18:37
  • 1816
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在JSP頁面用JS增加TABLE行及刪除行
举报原因:
原因补充:

(最多只允许输入30个字)