Question

这里的事情是通过在文本框中输入值来添加表行。即如果我在文本框中输入2并单击提交，它将添加两个表行。我一直在寻找解决方案，但我现在似乎无法找到答案。

<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>";

    }

我哪里出错了？或者所有代码都完全错了？

Answer 1

您当前的代码存在很多问题。首先，在点击提交后，您实际上是在提交表单，因此您永远无法看到javascript的结果 - 您需要使用按钮标记替换提交按钮或添加“返回错误”。到onClick。在循环中，您使用int而不是var来初始化循环。最后，我想你打算打电话给'rowAdd＆＃39; ＆＃39; NEWROW＆＃39;并把它放在循环中。

<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>

Answer 2

您在示例中犯了一些错误：

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>

如何从输入文本框的值动态添加HTML表中的表行

2 个答案: