如何從輸入文本框的值中動態添加HTML表格中的表格行

這裏的東西是通過在文本框中輸入值來添加表格行。即如果我在文本框中輸入2並單擊提交，它將添加兩個表格行。我一直在尋找解決方案，但我現在無法找到答案。如何從輸入文本框的值中動態添加HTML表格中的表格行

<form align="center" method="GET"> 
     <input type="text" name="users" id="user_id"><br> 
     <input type="submit" id="mysubmit" value="Submit" onClick="addMoreRows()"> 
</form> 

<table id="tbl_id" style="text-align:center" align="center" valign:"top"> 
     <thead> 
     <tr> 
     <th>Name</th> 
     <th>Score</th> 
     <th>Points</th> 
     <th>Total</th> 
     </tr> 
     </thead> 
</table> 

<script type="text/javascript"> 
    var rowsAdd = document.getElementById('tbl_id').insertRow(); 
    var rowsAdded; 
    function addMoreRows(){ 

    rowsAdded = document.getElementById('user_id').value(); 
    for(int x=0; x<rowsAdded; x++){ 

     var newCell = newRow.insertCell(); 
     newCell.innerHTML="<tr><td><input type='text' name='user_name'></td></tr>"; 

     newCell = newRow.insertCell(); 
     newCell.innerHTML="<tr><td><input type='text' name='score'></td></tr>"; 

     newCell = newRow.insertCell(); 
     newCell.innerHTML="<tr><td><input type='text' name='points'></td></tr>"; 

     newCell = newRow.insertCell(); 
     newCell.innerHTML="<tr><td><input type='text' name='total'></td></tr>"; 

    }

我哪裏出錯了？或者所有的代碼是完全錯誤的？

來源

2014-11-23 myooomyoo

'的for（int x = 0'？試試'爲（VAR X = 0' – RobG 2014-11-23 12:09:37

@RobG是的，它應該是無功..謝謝..也 – myooomyoo 2014-11-23 12:20:58

你必須與你當前的代碼不少問題。首先，點擊提交後，您實際上正在提交表單，因此您永遠無法看到JavaScript的結果 - 您需要用按鈕標記替換提交按鈕或向onClick添加「返回false」。在循環中，您使用int而不是var來初始化循環。最後，我想你的意思是調用'rowsAdd''newRow'並將其放入循環中。

<html> 
    <body> 

    <form align="center" method="GET"> 
     <input type="text" name="users" id="user_id"><br> 
     <input type="submit" id="mysubmit" value="Submit" onClick="addMoreRows(); return false;"> 
    </form> 

    <table id="tbl_id" style="text-align:center" align="center" valign:"top"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Score</th> 
       <th>Points</th> 
       <th>Total</th> 
      </tr> 
     </thead> 
    </table> 

    <script type="text/javascript"> 

     function addMoreRows() { 

     var rowsAdded = document.getElementById('user_id').value; 

     for(var x=0; x<rowsAdded; x++) { 
      var newRow = document.getElementById('tbl_id').insertRow(); 

      var newCell = newRow.insertCell(); 
      newCell.innerHTML="<tr><td><input type='text' name='user_name'></td></tr>"; 

      newCell = newRow.insertCell(); 
      newCell.innerHTML="<tr><td><input type='text' name='score'></td></tr>"; 

      newCell = newRow.insertCell(); 
      newCell.innerHTML="<tr><td><input type='text' name='points'></td></tr>"; 

      newCell = newRow.insertCell(); 
      newCell.innerHTML="<tr><td><input type='text' name='total'></td></tr>"; 

     } 

     } 
    </script> 

    </body> 

</html>

來源

2014-11-23 12:13:22

我從中學到了很多東西，謝謝你的工作！也感謝你不告訴我我是多麼愚蠢.. :)我仍然在學習.. :) – myooomyoo 2014-11-23 12:19:45

聽衆不應該完全在提交按鈕上，它應該在from的提交處理程序上。表單可以在不點擊按鈕的情況下提交，所以如果監聽器在按鈕上，它將不會被調用。提交按鈕或文本輸入也沒有理由具有ID。哦，並且一個TD不能包含一個TR，在表中使用* innerHTML *也是明智的（可以將它用於整個表或單元格的內容）。 – RobG 2014-11-23 13:56:08

@Matthew Sant你能幫我解答第二個問題嗎？升級到Chrome應用程序.. http://stackoverflow.com/questions/27478616/getting-data-from-another-html-file-in-chrome-app – myooomyoo 2014-12-15 13:10:28

你已經在你的例子做了幾個錯誤：

rowsAdded = document.getElementById('user_id').value(); - value()不作爲方法與DOM對象存在，您將使用屬性：value，而不是對所有input/select元素。
如果我明白你想要什麼，則不需要for循環。
valign:"top"不是table元素上的有效屬性，請改爲使用valign="top"。

這是代碼，會做什麼你想才達到：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf8" /> 
<title>table insert/row-cell</title> 
<script type="text/javascript"> 
    function addMoreRows() { 
    var user = document.getElementById('user_id').value; 
    var table = document.getElementById('tbl_id'); 

    var row = table.insertRow(); 

    var userName = row.insertCell(0); 
    var scores = row.insertCell(1); 
    var points = row.insertCell(2); 
    var total = row.insertCell(3); 

    userName.innerHTML = user; 
    scores.innerHTML = '1'; 
    points.innerHTML = '2'; 
    total.innerHTML = (scores.innerHTML + points.innerHTML).toString(); 
    } 
</script> 
</head> 

<body> 
<form align="center" method="GET"> 
     <input type="text" name="users" id="user_id"><br> 
     <input type="button" id="mysubmit" value="Submit" onClick="addMoreRows()"> 
</form> 

<table id="tbl_id" style="text-align:center" align="center" valign="top"> 
     <thead> 
     <tr> 
     <th>Name</th> 
     <th>Score</th> 
     <th>Points</th> 
     <th>Total</th> 
     </tr> 
     </thead> 
     <tbody> 

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

來源

2014-11-23 12:09:25 Duvdevan

確定的分數應該添加到'12'？ – RobG 2014-11-23 12:10:55

如何從輸入文本框的值中動態添加HTML表格中的表格行

回答

相關問題