javascript如何动态在table中加tr和td啊

kawudi2 2013-01-18 02:58:59

...全文

1550 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

tanpeng1711 2013-01-19

打赏
举报

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> window.onload = function () { document.getElementById("butAddRow").attachEvent("onclick", butAddRow); } function butAddRow() { var tab = document.getElementById("tab"); var trCount = tab.childNodes.length; var _tr = document.createElement("tr"); var _td1 = document.createElement("td"); _td1.innerHTML = trCount; _td1.align = "center"; var _td2 = document.createElement("td"); _td2.innerHTML = "<input type='text' style='width:120px;text-align:left;' value='张三'/>"; _td2.align = "right"; var _td3 = document.createElement("td"); _td3.innerHTML = "<input type='text' style='width:120px;text-align:right;' value='20'/>"; _td3.align = "right"; var _td4 = document.createElement("td"); _td4.innerHTML = "<input type='radio' name='gender" + trCount + "' value='男'/>男<input type='radio' name='gender" + trCount + "' value='女'/>女"; _td4.align = "center"; _tr.appendChild(_td1); _tr.appendChild(_td2); _tr.appendChild(_td3); _tr.appendChild(_td4); tab.appendChild(_tr); } </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="butAddRow" value="添加行"/> <table id="tab"> <tr><th style='width:50px;'>序号</th><th style='width:120px;'>姓名</th><th style='width:120px;'>年龄</th><th style='width:120px;'>性别</th></tr> </table> </div> </form> </body> </html>

wpf1523 2013-01-19

打赏
举报

推荐使用insertRow或者insertCell，appendchild在IE浏览器下可能会引起莫名其妙的问题。 insertRow或者insertCell各大浏览器的使用方法都一样，只不过有一点小差别，IE允许insertRow() 和insertCell() 不带任何参数，表示插入到最后，而FiireFox要求insertRow 和insertCell 必须带任何参数，用-1表示插入到最后。

冰岛男孩 2013-01-19

打赏
举报

jquery $(function(){ var str="<tr><td></td></tr>"; $("table").append(str); });

黑夜里的黑猫 2013-01-18

打赏
举报


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>text</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery-1.7.1.js"></script>
  <script type="text/javascript">
  $(function(){
	 $("#addBtn").live("click",function(){
		var number = $("#dataTable tr").length;
		var addRow = "<tr><td>"+number+"</td><td>路人"+number+"</td><td>"+number+"</td><td>男</td></tr>";
		$("#dataTable").append(addRow);
	 });
  });
  </script>
 </head>

 <body>
  <table id="dataTable" border="1">
  <tr>
	<td>序号</td>
	<td>姓名</td>
	<td>年龄</td>
	<td>性别</td>
  </tr>
  <tr>
	<td>1</td>
	<td>甲</td>
	<td>11</td>
	<td>男</td>
  </tr>
  <tr>
	<td>2</td>
	<td>乙</td>
	<td>12</td>
	<td>女</td>
  </tr>
  <tr>
	<td>3</td>
	<td>丙</td>
	<td>13</td>
	<td>男</td>
  </tr>
  </table>
  <button id="addBtn">addRow</button>
 </body>
</html>

似梦飞花 2013-01-18

打赏
举报

createElement + appendChild试试

爱若如梦 2013-01-18

打赏
举报

主要是通过insertRow实现


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function onchecks(){
	   var tb = document.getElementById("tb")
       var tr1 = tb.insertRow(tb.rows.length);
       index= tb.rows.length;
       var name="name"+index;
       var standand="standand"+index;
       var unit="unit"+index;
       var amount="amount"+index;
       var price="price"+index;
       var remark="remark"+index;  
       var td1 = tr1.insertCell();
       td1.width = "100px";
       td1.align = "center";
       td1.innerHTML="<input type='text' name='name' id='name' class='fulltext required'/>";    
       var td2 = tr1.insertCell();
      td2.width = "100px";
      td2.innerHTML="<input type='text' name='standand' id='standand' class='fulltext required' />";
       var td3 = tr1.insertCell();
      td3.width = "100px";
      td3.innerHTML="<input type='text' name='unit' id='unit' class='fulltext required' />";
       var td4 = tr1.insertCell();
      td4.width = "100px";
      td4.innerHTML="<input type='text' name='amount' id='amount' class='fulltext required' />";
       var td5 = tr1.insertCell();
      td5.width = "100px";
      td5.innerHTML="<input type='text' name='price' id='price' class='fulltext required' />";
       var td6 = tr1.insertCell();
      td6.width = "100px";
      td6.innerHTML="<input type='text' name='remark' id='remark' class='fulltext' />";
      index++;
}
</script>
<table id="tb">
<tr>
    <td class="title" width="1%" nowrap>名称</td>
    <td class="title" width="1%" nowrap>规格</td>
    <td class="title" width="1%" nowrap>单位</td>
    <td class="title" width="1%" nowrap>数量</td>
    <td class="title" width="1%" nowrap>单价(￥)</td>
    <td class="title" width="1%" nowrap>备注</td>
   </tr>
  <tr>
    <td width="1%">
     <input type="text" name="name" id="name1"  />
    </td>  
    <td width="1%">
     <input type="text" name="standand" id="standand1" />
    </td>  
    <td width="1%">
     <input type="text" name="unit" id="unit1" />
    </td>   
    <td width="1%">
     <input type="text" name="amount" id="amount1" />
    </td>   
    <td width="1%">
     <input type="text" name="price" id="price1" />
    </td>      
    <td width="1%">
     <input type="text" name="remark" id="remark1" />
    </td> 
   </tr>
</table>
<input type="button" value="添加行" onclick="onchecks();"> 
</body>
</html>