js动态新增表格行

原创 2005年05月26日 22:52:00
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="JavaScript">
String.prototype.trim = function()
{
    // 用正则表达式将前后空格,用空字符串替代。    
 //用法 a.trim()
    return this.replace(/(^/s*)|(/s*$)/g, "");
}
function doAdd()
{
 var myTable = document.all.myTable;
 var currentRows = myTable.rows.length;//原来的行数
 var atr = myTable.rows[currentRows-1];
 var insertTr = myTable.insertRow(currentRows);
 var trStr = atr.innerHTML; //表格最后一行的html代码
 var trhtmlArray = trStr.split("<TD>");
 var cols = myTable.rows[0].children.length;//总共列数
 //alert(atr.innerHTML);
 //alert(cols);
 //alert("数组长度="+trhtmlArray.length);
 for(var i=0;i<cols;i++)
 {
  var insertTd = insertTr.insertCell(i);
  var tdHtml = trhtmlArray[i+1];//split函数得到了比cols多一个长度
  //alert(tdHtml);
  //alert(tdHtml.trim().length);
  tdHtml = tdHtml.trim().substr(0, (tdHtml.trim().length-5));
  //alert(tdHtml);
  insertTd.innerHTML = tdHtml;
 }
 //清除值
 for(var i=0;i<cols;i++)
 {
  var TdElementsCount = myTable.rows[currentRows].children[i].children.length;
  if(i==0)
  {
   var rowNumber = myTable.rows.length-1;
   //alert(rowNumber);
   myTable.rows[currentRows].children[0].children[0].value = rowNumber;
  }
  else
  {
   for(var j=0;j<TdElementsCount;j++)
   {
    if(myTable.rows[currentRows].children[i].children[j].tagName == "SELECT")
     myTable.rows[currentRows].children[i].children[j].selectedIndex = 0;
    else
     myTable.rows[currentRows].children[i].children[j].value = "";
   }
  }
 }
}
function doAddBatRows()
{
 var insertRows = document.all.插入行数.value.trim();
 if (!(insertRows =="" || insertRows =="0"))
 {
  for (var i=0;i<insertRows;i++)
   doAdd();
 }
}
function dodelete()
{
 var myTable = document.all.myTable;
 var rows = myTable.rows.length;
 if(rows>2)
  myTable.deleteRow(rows-1);
}
</script>
<BODY>
<form>
<table id="myTable" border="1" align="center">
 <TR align="center" height="20">
  <td width="20%">
   序号
  </td>
  <td width="20%">
   01
  </td>
  <td width="20%">
   02
  </td>
  <td width="20%">
   03
  </td>
  <td width="20%">
   04
  </td>
 </TR>
 <TR>
  <td>
   <input type="text" name="id001" value="1" readonly=true>
  </td>
  <td>
   <input type="hidden" name="id010" value="1">
   <input type="text" name="id011" value="">
  </td>
  <td>
   <input type="hidden" name="id020" value="1">
   <select name="select">
    <option value="male">男</option>
    <option value="female">女</option>
   </select>
  </td>
  <td>
   <input type="hidden" name="id030" value="1">
   <input type="text" name="id031" value="">
  </td>
  <td>
   <input type="hidden" name="id040" value="1">
   <input type="text" name="id041" value="" onclick="alert();">
  </td>
 </TR>
</table>
<br>
<input type="button" name="新增一行" value="新增一行" onclick="doAdd();">
<br>
<input type="text" name="插入行数" value="">
<input type="button" name="新增多行" value="新增多行" onclick="doAddBatRows();">
<br>
<input type="button" name="删除一行" value="删除一行" onclick="dodelete();">
</form>
</BODY>
</HTML>

js 操作表格动态添加和删除行

  • 2016年03月30日 13:40
  • 1KB
  • 下载

JS动态增加删除表格行

  • 2010年09月29日 11:26
  • 2KB
  • 下载

JS@DOM:向表格中动态添加行显示信息,做到滚动效果

最近在学习D3,很多时候都用到了表格,并且在js中动态地添加和删除表格,在这里总结一下js关于表格的操作: 首先要知道,js中没有提供关于列的操作,所以关于列的操作只能通过操作行来实现,比如获得列的数...

js动态表格--行操作

  • 2012年01月07日 13:24
  • 57KB
  • 下载

js实现动态删除表格的行或者列-------Day57

让静态页面动起来,这句话有没有毛病啊....

js 实现 动态改变表格的行顺序

  • 2010年03月31日 14:28
  • 2KB
  • 下载

js下为表格内部动态添加行的代码

http://www.jb51.net/article/23763.htm 给表格内部动态添加行 .tableStyle { border-collapse...

js动态的添加删除表格的行和列

声明:本文摘自网络 js动态操作表格  function init(){       _table=document.getElementById("table"); ...

Html+js实现表格可编辑,并能动态添加删除行

功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容。 点击增加行,在table的末尾增加一行;点击删除行,删除table中最末尾的一行。       ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js动态新增表格行
举报原因:
原因补充:

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