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>

JavaScript动态添加/删除表格行

使用原生JavaScript来解决简单的table行动态增删问题
  • sqq0103
  • sqq0103
  • 2016年12月16日 22:23
  • 1282

js实现动态添加表格的行

js实现动态添加表格的行
  • qq_15536303
  • qq_15536303
  • 2016年08月07日 11:36
  • 752

js动态添加表格的行与列

//动态添加行与列 function addHtml( )         {     var tab=document.getElementById("viewTabs"); //获得表格 ...
  • Long_carol
  • Long_carol
  • 2012年03月15日 14:17
  • 12947

js简单的表格添加行和删除行操作.

//创建一个html元素 function $c(tagname){ return document.createElement(tagname); } //文档加载完成后要执行的内容 $(...
  • qq457557442
  • qq457557442
  • 2014年03月30日 00:16
  • 2643

javascript document 对表格进行添加新行,删除添加的行

作者:hyzhang 时间:2017-10-11 描述:document 对表格进行添加删除操作 --> /*tr:hover{ color: yellow; }*/ ...
  • hyzhang6
  • hyzhang6
  • 2017年10月12日 10:05
  • 265

javascript动态加载表格与动态添加表格行

一、动态加载表格       1.首先在html中为表格的添加位置设置id                即是在html的body标签内部写一个div标签表明表格要添加到此div的内部。如下  ...
  • iamshiny
  • iamshiny
  • 2013年11月26日 22:14
  • 1443

JS 表格新增行

%@page contentType="text/html;charset=utf-8"%> http://java.sun.com/jsp/jstl/core" prefix="c"%>   ht...
  • hengxingbao
  • hengxingbao
  • 2011年08月03日 10:01
  • 234

js实现动态删除表格行和列

记录了动态添加表格的一行,当然这个一行是指一行数据,也就是说一行多少列也是加上的,并且第几列的内容都可以添加上,先来回顾下它的实现的关键点: 1、var row=table.insertRow(...
  • u012422446
  • u012422446
  • 2015年08月18日 11:10
  • 5376

AngularJS(基本使用)动态添加表格数据(增删改查)

水果: 水果名称 操作 {{g.name}} var mb = angular.module("myApp",[])...
  • mayn666
  • mayn666
  • 2017年12月08日 19:47
  • 319

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

让静态页面动起来,这句话有没有毛病啊....
  • marSmile_tbo
  • marSmile_tbo
  • 2014年07月04日 22:22
  • 3791
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js动态新增表格行
举报原因:
原因补充:

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