Javascript 动态表中的动态表_Javascript_Html Table

Javascript 动态表中的动态表

javascript

Javascript 动态表中的动态表,javascript,html-table,Javascript,Html Table,我有一个运行良好的动态表，但我试图在单元格中实现相同的表，使其具有相同的功能，但仅在单元格中。我遇到的问题是，当在大表上按下add row按钮时，下一行在表中不包含新的动态表。有没有办法在函数中调用函数来解决这个问题 <html> <body> <input type="button" value="Add Row" onclick="addRow('dataTable')" /> <table id="dataTable" width=

我有一个运行良好的动态表，但我试图在单元格中实现相同的表，使其具有相同的功能，但仅在单元格中。我遇到的问题是，当在大表上按下add row按钮时，下一行在表中不包含新的动态表。有没有办法在函数中调用函数来解决这个问题

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


1.
1.
函数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=行插入单元格（2）；
var元素=document.createElement（“输入”）；
element.type=“text”；
element.name=“txtbox[]”；
secondCell.appendChild（元素）；
var element2=document.createElement（“输入”）；
element2.type=“text”；
element2.name=“txtbox2[]”；
第三单元。附加子单元（元素2）；
}
函数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=行插入单元格（2）；
var元素=document.createElement（“输入”）；
element.type=“text”；
element.name=“txtbox[]”；
secondCell.appendChild（元素）；
var element2=document.createElement（“输入”）；
element2.type=“text”；
element2.name=“txtbox2[]”；
第三单元。附加子单元（元素2）；
}

不完全确定这是您所追求的，但这对您有何作用

<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.
1.
var contents=document.getElementById（'dataTable'）.outerHTML；
函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var firstCell=row.insertCell（0）；
setAttribute（'colspan'，3）；
var newCont=contents.replace（'1'，行数+1）；
firstCell.innerHTML=newCont；
}

…不，我正在尝试让新行添加一行，但也要使用“添加行”按钮和新行中的单元格