更改表格usnig javascript中單元格的內容

Question

<html><head>
<script type="text/javascript">
function addFunction(id)
{
  cnt=parseInt(id.substr(7));
  var row=document.getElementById('driverDetails').insertRow(cnt+1);
  var c1=row.insertCell(-1);
  var c2=row.insertCell(-1);
  var c3=row.insertCell(-1);
  c1.innerHTML="row"+(cnt+1)+"colum1";
  c2.innerHTML="row"+(cnt+1)+"colum2";
  c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New"  onclick="addFunction(this.id)"/>';
} 
</script>
</head><body>
  <table> 
     <tr>
         <td>row1 colum1</td>
         <td>row1 colum2</td>
         <td><input type="button" id="addNew_1" name="addNew_1" value="Add New"  onclick="addFunction(this.id)"/></td>
     </tr>        
   </table>
</body>
</html>

當我單擊添加新按鈕時，我們可以更改上一行的第三個單元格的內容嗎

Answer 1

干得好 ...

<html><head>
<script type="text/javascript">
function addFunction(id)
{
  cnt=parseInt(id.substr(7));
  var row=document.getElementById('driverDetails').insertRow(cnt);
  var c1=row.insertCell(-1);
  var c2=row.insertCell(-1);
  var c3=row.insertCell(-1);
  c1.innerHTML="row"+(cnt+1)+"colum1";
  c2.innerHTML="row"+(cnt+1)+"colum2";
  c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New"  onclick="addFunction(this.id)"/>';
  document.getElementById('driverDetails').rows[cnt-1].deleteCell(2);

} 
</script>
</head><body>
  <table id="driverDetails"> 
     <tr>
         <td>row1 colum1</td>
         <td>row1 colum2</td>
         <td><input type="button" id="addNew_1" name="addNew_1" value="Add New"  onclick="addFunction(this.id)"/></td>
     </tr>        
   </table>
</body>
</html>

Answer 2

我認為這是一個可以滿足您需求的函數。

function addFunction(id) {
  var table = document.getElementById('driverDetails');

  var tr = document.createElement("TR");
  table.tBodies[0].appendChild(tr);

  var rowCount = table.tBodies[0].rows.length;
  var colCount = table.tBodies[0].rows[0].cells.length;

  tr.innerHTML =
    "<td>Row "+(rowCount)+", Col "+colCount+" 1</td>"+
    "<td>Row "+(rowCount)+", Col "+colCount+"  2</td>"
}

這樣，您不必在每次創建新行時都添加第三個單元格並將其刪除。 每次您單擊同一按鈕時，它只會追加一行。

（如果要添加新行，請檢查javascript DOM中的insertBefore()方法）。

Answer 3

<html><head><script type="text/javascript">
function addFunction(id)
{ cnt=parseInt(id.substr(7));
  document.getElementById('driverDetails').rows[cnt].deleteCell(2);
  var row=document.getElementById('driverDetails').insertRow(cnt+1);
  var c1=row.insertCell(-1);
  var c2=row.insertCell(-1);
  var c3=row.insertCell(-1);
  c1.innerHTML="row"+(cnt+1)+"colum1";
  c2.innerHTML="row"+(cnt+1)+"colum2";
  c3.innerHTML='<input type="button" id="addNew_'+(cnt+1)+'" name="addNew_'+(cnt+1)+'" value="Add New"  onclick="addFunction(this.id)"/>';
}
</script>
</head>
<body>
  <table>
     <tr>
         <td>row1 colum1</td>
         <td>row1 colum2</td>
         <td><input type="button" id="addNew_1" name="addNew_1" value="Add New"  onclick="addFunction(this.id)"/></td>
     </tr>

   </table>
</body>
</html>

謝謝羅南·德傑羅（Ronan Dejhero），我這樣更改了代碼，所以我得到了答案

Answer 4

或使用jQuery：

<html>
<head>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function addFunction(id) {
  var count = $('#box').find('tr').size()+1;
  $('#box').append('<tr><td>row'+count+
' colum1</td><td>row'+count+' colum2</td></tr>');
}
</script>
</head>
<body>
<table id="box"> 
  <tr>
    <td>row1 colum1</td>
    <td>row1 colum2</td>
  </tr>
</table>
<input type="button" value="Add New"  onclick="addFunction()"/>
</body>
</html>

更改表格usnig javascript中單元格的內容

問題描述

4 個解決方案

解決方案1
1 已采納 2010-11-15 08:11:32

解決方案2
0 2010-11-15 07:54:30

解決方案3
0 2010-11-15 08:23:11

解決方案4
0 2010-11-15 08:28:51

更改表格usnig javascript中單元格的內容

問題描述

4 個解決方案

解決方案1 1 已采納 2010-11-15 08:11:32

解決方案2 0 2010-11-15 07:54:30

解決方案3 0 2010-11-15 08:23:11

解決方案4 0 2010-11-15 08:28:51

解決方案1
1 已采納 2010-11-15 08:11:32

解決方案2
0 2010-11-15 07:54:30

解決方案3
0 2010-11-15 08:23:11

解決方案4
0 2010-11-15 08:28:51