菜鸟求助，关于javascript对表格进行操作？

TomSweet 2008-05-13 10:54:29

为什么只显示页面，功能却没有实现呢？
<html>
<head>
<script language="JavaScript">
</script>
</head>
<body style="margin:40px">
<table id="mainTb" border="1">
<tr><th width="80">姓名</th><th width="250">单位</th></tr>
<tr id="row0"><td>张三</td><td>北京中软科技公司</td>
<td><input type="button" value="删除" onclick="deleteRow(0)"></td></tr>
<tr id="row1"><td>李四</td><td>上海南嘉食品公司</td>
<td><input type="button" value="删除"onclick="deleteRow(1)"></td></tr>
</table><br>
<div>
<span id="new">
姓名：<input type="text" name="newName" id="newName"><br>
单位：<input type="text" id="newCompany">
<input type="button" value="新增" onclick="addRow()">
</span>
</div>
</body>
</html>

...全文

109 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

pla18sep 2008-05-13

打赏
举报

var newRowObj = tableObj.insertRow(tableObj.rows.length);
var newNameCell = newRowObj.insertCell(newRowObj.cells.[0]);
var newCompanyCell = newRowObj.insertCell(newRowObj.cells[1]);
var newButtonCell = newRowObj.insertCell(newRowObj.cells.[2]);
语法错误：红色部分删除，添加蓝色部分；
逻辑错误：添加时，删除按钮被添加在了行首；删除时，第一行删除对应的是标题栏（这部分错误你自己查）

wzy_love_sly 2008-05-13

打赏
举报

<html>

<head>

<script language="JavaScript"> 

  function deleteRow(obj) {  

    index = obj.parentElement.parentElement.rowIndex;

    document.getElementById('mainTb').deleteRow(index);

  }

  

  function addRow() 

  {      

    var tableObj = document.getElementById("mainTb"); 

    var newRowObj = tableObj.insertRow(tableObj.rows.length); 

    var newNameCell = newRowObj.insertCell(0); 

    var newCompanyCell = newRowObj.insertCell(1); 

    var newButtonCell = newRowObj.insertCell(2); 

    newNameCell.innerHTML = document.getElementById("newName").value; 

    newCompanyCell.innerHTML = document.getElementById("newCompany").value; 

    newButtonCell.innerHTML = ' <input type="button" value="删除" onclick="deleteRow(this)">'; 

  } 

  

</script>

</head>

<body  style="margin:40px">



<div>

<table id="mainTb" border="1">

 <tr><th width="80">姓名</th><th width="250">单位 </th> </tr>

 <tr id="row0"> <td>张三</td><td>北京中软科技公司 </td>

<td> <input type="button" value="删除" onclick="deleteRow(this)" id="Button1"> </td> </tr>

   <tr id="row1"> <td>李四 </td> <td>上海南嘉食品公司 </td>

<td> <input type="button" value="删除"onclick="deleteRow(this)"> </td> </tr>

</table> <br>

<div>





<span id="new">

姓名： <input type="text" name="newName" id="newName"> <br>

单位： <input type="text" id="newCompany"> 

<input type="button" value="新增" onclick="addRow()">

</span>

</div>

</body>

</html>

wzy_love_sly 2008-05-13

打赏
举报

不能写死，删除后index变了

  function deleteRow(obj) {  

    index = obj.parentElement.parentElement.rowIndex;

    document.getElementById('mainTb').deleteRow(index);

  }

Go 旅城通票 2008-05-13

打赏
举报

<html> 

<head> 

<script> 

  function addRow() 

  {       //添加行 

    var tableObj = document.getElementById("mainTb");  //获取表格相关属性 

    //设置行、名称、单位、按钮等相关变量 

    var newRowObj = tableObj.insertRow(tableObj.rows.length); 

/* var newNameCell = newRowObj.insertCell(newRowObj.cells.[0]; 

    var newCompanyCell = newRowObj.insertCell(newRowObj.cells[1]); 

    var newButtonCell = newRowObj.insertCell(newRowObj.cells.[2]); 

===>>>>>

*/

    var newNameCell = newRowObj.insertCell(0); 

    var newCompanyCell = newRowObj.insertCell(1); 

    var newButtonCell = newRowObj.insertCell(2); 

    //添加“姓名”表元 

    newNameCell.innerHTML = document.getElementById("newName").value; 

    //添加“单位”表元 

    newCompanyCell.innerHTML = document.getElementById("newCompany").value; 

    //添加“删除”表元 

    newButtonCell.innerHTML = ' <input type="button" value="删除" onclick="deleteRow('+(tableObj.rows.length-1)+')">'; 

  } 

  function deleteRow(index) {  //删除行 

var tableObj = document.getElementById("mainTb");  //获取表格相关属性 

tableObj.deleteRow(index);  //删除指定行 

  } 

</script> 

</head> 

<body  style="margin:40px"> 

<table id="mainTb" border="1"> 

   <tr> <th width="80">姓名 </th> <th width="250">单位 </th> </tr> 

   <tr id="row0"> <td>张三 </td> <td>北京中软科技公司 </td> 

<td> <input type="button" value="删除" onclick="deleteRow(0)"> </td> </tr> 

   <tr id="row1"> <td>李四 </td> <td>上海南嘉食品公司 </td> 

<td> <input type="button" value="删除"onclick="deleteRow(1)"> </td> </tr> 

</table> <br> 

<div> 

<span id="new"> 

姓名： <input type="text" name="newName" id="newName"> <br> 

单位： <input type="text" id="newCompany">  

<input type="button" value="新增" onclick="addRow()"> 

</span> 

</div> 

</body> 

</html>