Question

这是我的完整代码。我使用“for”来复制表n次。但是一个函数“copy（Selector）”仅在第一个表运行而不能在后续复制的表中运行。这是一个初学者和帮助我解决方案或改变代码。

<!Doctype HTML>
<html>

<head>

  <style>
    table {
      border-collapse: collapse
    }

    td {
      border: 1px solid black;
      height: 100%;
    }

    p001 {
      border: none;
    }

    table {
      counter-reset: section;
    }

    .count:before {
      counter-increment: section;
      content: counter(section);
    }
  </style>

  <script type="text/javascript">
    var num, i, c;
    j = 1;

    function cloneRow() {
      num = document.getElementById("copying number").value;
      for (i = 0; i < num - 1; i++) {
        var row = document.getElementById("rowToClone");
        var table = document.getElementById("tableToModify");
        var clone = row.cloneNode(true);
        clone.id = "newID";
        table.appendChild(clone);
        document.getElementById("Name1").value = "";
        document.getElementById("Name2").value = "";
        document.getElementById("Name3").value = "";
        document.getElementById("Name4").value = "";
      }

      function createRow() {
        var row = document.createElement('tr');
        var col = document.createElement('td');
        var col2 = document.createElement('td');
        row.appendChild(col);
        row.appendChild(col2);
        var table = document.getElementById("tableToModify");
        table.appendChild(row);
      }
    }
  </script>

  <script>
    function copy(selector) {
      var text1 = document.getElementById(selector + "1").value;
      document.getElementById(selector + "2").value = text1;
      var text2 = document.getElementById(selector + "3").value;
      document.getElementById(selector + "4").value = text2;
    }
  </script>

  <body>
    <form>
      <h4>Enter the number of times to be copied</h4>
      <input type="text" id="copying number" placeholder="Enter Here">
      <input type="reset" value="clear">
    </form>
    <br>
    <br>
    <input type="submit" value="Copy row" onclick="cloneRow()">

    <br><br>

    <table width="100%" id="tableToModify">
      <tbody id="rowToClone">

        <tr>
          <td colspan="5" style="border:2px solid black;height:50px;text-align:center;">header
        </tr>

        <tr>
          <td style="height:25px;width:11%;text-align:center;" class="count">Name</td>

          <td colspan="3" style="width:11%;height:100px;text-align:center;">Age</td>
          <td style="width:11%;text-align:center;">Gender</td>

        </tr>

        <tr>

          <td rowspan="3" style="height:100px;">
            <pre>Name  <input type="text" name="Emp name"  placeholder="enter your name"  id="Name1"/><br>
        ID    <input type="id" name="Emp Id" placeholder="enter id" id="Name3" > </pre>
          </td>

          <td></td>
          <td></td>
          <td></td>

          <td rowspan="3">
            <pre>
          <input type="radio" name="Gender" value="male">MALE</input>
          <input type="radio" name="Gender" value="female">FEMALE</input> <br>  <input type="radio" name="Gender" value="other">OTHER</input>
          </pre>
          </td>

        </tr>

        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr id="p01">
          <td></td>
          <td colspan="4" style="height:100px"></td>

        </tr>
        <tr>
          <td colspan="5" style="height:50px;text-align:center;">
            footer</td>

        </tr>

        <tr id="p001">
          <td colspan="10" style="border:1px solid #ffffff;height:150px;"><input type="button" value="Get data" onclick="copy('Name');" />
            <pre><label for="text"> Name : <input type="text" id="Name2"></label>
        <label for="text"> ID   : <input type="id" id="Name4"></label> </pre>

      </tbody>
    </table>
  </body>
</head>

</html>

如何解决这个问题..？

0 个答案: