Question

我有一个完美的动态表，但我试图在单元格中实现相同的表，并且它具有相同的功能，但仅在单元格中。我遇到的问题是，当在大表上按下添加行按钮时，下一行不包含表中的新动态表。有没有办法基本上调用函数中的函数来解决这个问题？

<html>
<body>
    <input type="button" value="Add Row" onclick="addRow('dataTable')" />
    <table id="dataTable" width="150px" border="1">
        <tr>
            <td height="84">
                1
            </td>
            <td>
                <input type="text" />
            </td>
    <td> <input name="button" type="button" onClick="addRow('dataTable1')" value="Add Row" /> 
      <table id="dataTable1" width="150px" border="1">
        <tr> 
          <td height="27"> 1 </td>
          <td> <input name="text" type="text" /> </td>
          <td> <input name="text" type="text" /> </td>
        </tr>
      </table>
      <script type="text/javascript">

        function addRow1(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var firstCell = row.insertCell(0);
            firstCell.innerHTML = rowCount + 1;
            var secondCell = row.insertCell(1);
            var thirdCell = row.insertCell(2);
            var element = document.createElement("input");
            element.type = "text";
            element.name = "txtbox[]";
            secondCell.appendChild(element);
            var element2 = document.createElement("input");

            element2.type = "text";

            element2.name = "txtbox2[]";

            thirdCell.appendChild(element2);

        }
    </script> </td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
        function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var firstCell = row.insertCell(0);
            firstCell.innerHTML = rowCount + 1;
            var secondCell = row.insertCell(1);
            var thirdCell = row.insertCell(2);
            var element = document.createElement("input");
            element.type = "text";
            element.name = "txtbox[]";
            secondCell.appendChild(element);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "txtbox2[]";
            thirdCell.appendChild(element2);

        }
    </script>

Answer 1

不完全确定这是你所追求的，但这对你有用吗？

<html>
<body>
    <input type="button" value="Add Row" onclick="addRow('dataTable')" />
    <table id="dataTable" width="150px" border="1">
        <tr>
  <td height="84">
      1
  </td>
  <td>
      <input type="text" />
  </td>
    <td> <input name="button" type="button" onClick="addRow('dataTable1')" value="Add Row" /> 
      <table id="dataTable1" width="150px" border="1">
        <tr> 
          <td height="27"> 1 </td>
          <td> <input name="text" type="text" /> </td>
          <td> <input name="text" type="text" /> </td>
        </tr>
      </table>
      </td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
var contents = document.getElementById('dataTable').outerHTML;

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var firstCell = row.insertCell(0);
  firstCell.setAttribute('colspan', 3);
  var newCont = contents.replace(' 1 ', rowCount + 1);
  firstCell.innerHTML = newCont;
}
</script>

动态表中的动态表

1 个答案: