`

js增加行

    博客分类：
  • js
正则表达式J#JavaScriptprototypeHTML 
阅读更多

<!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层拖动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics