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

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

javascript html dynamic

Javascript 如何从输入文本框的值在HTML表格中动态添加表格行,javascript,html,dynamic,Javascript,Html,Dynamic,这里的问题是通过在文本框中输入值来添加表行。 i、若我在文本框中输入2并点击提交，它将添加两行表格。我一直在寻找解决办法，但目前似乎找不到答案 <form align="center" method="GET"> <input type="text" name="users" id="user_id"><br> <input type="submit" id="mysubmit" value="Submit" onClick=

这里的问题是通过在文本框中输入值来添加表行。 i、若我在文本框中输入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>";

    }




名称
分数
要点
全部的
var rowsad=document.getElementById（'tbl_id'）.insertRow（）；
我感到悲伤；
函数addMoreRows（）{
rowsAdded=document.getElementById（'user_id'）.value（）；
对于（int x=0；x您在示例中犯了一些错误：
rowsAdded=document.getElementById（'user_id'）.value（）；
-value（）
在DOM对象中不作为方法存在，您将对所有input/select
元素使用属性：value
如果我明白你想要什么，你不需要一个循环

valign:“top”
不是表
元素上的有效属性，请改用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>


表插入/行单元格
函数addMoreRows（）{
var user=document.getElementById（'user_id'）。值；
var table=document.getElementById（'tbl_id'）；
var row=table.insertRow（）；
var userName=row.insertCell（0）；
var分数=行插入单元格（1）；
var点=行插入单元格（2）；
var总计=行插入单元格（3）；
userName.innerHTML=用户；
scores.innerHTML='1'；
points.innerHTML='2'；
total.innerHTML=（scores.innerHTML+points.innerHTML）.toString（）；
}


名称
分数
要点
全部的
您当前的代码有很多问题。首先也是最重要的是，在单击“提交”之后，您实际上是在提交表单，因此您永远看不到javascript的结果-您需要用按钮标记替换“提交”按钮，或者在onClick中添加“return false”。在循环中，您使用int而不是var来初始化ise循环。最后，我想你的意思是调用“Rowsad”“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>




名称
分数
要点
全部的
函数addMoreRows（）{
var rowsAdded=document.getElementById（'user_id'）。值；
对于（var x=0；xfor（int x=0
）？尝试for（var x=0
@RobG是的，它应该是var.。也谢谢你..你确定分数应该加到'12'吗？我从中学到了很多。谢谢你的工作！也谢谢你没有告诉我我有多笨..我还在学习...）监听器根本不应该位于submit按钮上，它应该位于from的submit处理程序上。表单可以在不单击按钮的情况下提交，因此如果监听器位于按钮上，它将不会被调用。提交按钮或文本输入也没有理由有ID。哦，TD不能包含TR，使用innerHTML w也是不明智的使用一个表（可以将其用于整个表或单元格的内容）。@Matthew Sant你能帮我回答我的第二个问题吗？升级到Chrome应用程序。。