使用Javascript的多个动态HTML表

Question

大家好，我想知道您是否可以在创建动态表方面遇到一些问题？ 我正在使用HTML和Javascript尝试执行此操作，这可能证明Javascript不是执行此操作的最佳方法，如果不是，请您指教吗？

我正在做一个项目，其中涉及一个表单中的多个HTML表。 我想做的是，如果用户希望向每个表中添加新行，他们可以这样做，如果愿意，甚至可以添加多行。 这是我的HTML表格当前的外观，以让您了解我正在使用的内容：

表格1：

  <table id='generalHazards'><tbody>
<tr><th>Primary Area</th>
    <th>Ref:</th>
    <th>Secondary Area/Specific hazard</th>
    <th>General Location</th>
    <th>Specific Location</th>
    <th>Risk Rating</th>
    <th>Recommendation</th>
    <th>Who will action (Service manager, Cofely, Corporate, H+S Manager, Corporate Fire Manager</th>
    <th></th>
</tr>    
    <td><input type="text" id="hazard0"/></td>
    <td><input type="text" id="hazard1"/></td>
    <td><input type="text" id="hazard2"/></td>
    <td><input type="text" id="hazard3"/></td>
    <td><input type="text" id="hazard4"/></td>
    <td><input type="text" id="hazard5"/></td>
    <td><input type="text" id="hazard6"/></td>
    <td><input type="text" id="hazard7"/></td>
    <td><input type='button' id='hazard8' value='+' onclick="appendRow('generalHazards')" />
    </td>
</tr></tbody> </table>

表2

  <table id='intolerableRisks'><tbody>
<tr><th>Primary Area</th>
    <th>FINDINGS</th>
    <th>RECOMMENDATION</th>
    <th></th>
</tr>    
    <td><input type="text" id="risk0"/></td>
    <td><input type="text" id="risk1"/></td>
    <td><input type='button' id='risk3' value='+' onclick="appendRow('intolerableRisks')" />
    </td>
</tr></tbody> </table>

表3

  <table id='riskRating'><tbody>
<tr><th>Primary Area</th>
    <th>FINDINGS</th>
    <th>RECOMMENDATION</th>
    <th></th>
</tr>    
    <td><input type="text" id="riskrate0"/></td>
    <td><input type="text" id="riskrate1"/></td>
    <td><input type='button' id='riskrate3' value='+' onclick="appendRow('riskRating')" />
    </td>
</tr></tbody> </table>

JavaScript代码

我知道我将需要一个单独的表元素调用才能将多个动态表添加到单个网页。 以下Javascript代码仅适用于一个表，并且添加更多表会破坏脚本，即使分配了标签，也无法向网页上的任何其他表添加任何新行。

<script>function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var colCount = table.rows[0].cells.length;    
var validate_Noof_columns = (colCount - 1); // •No Of Columns to be Validated on Text.
for(var j = 0; j < colCount; j++) { 
    var text = window.document.getElementById('input'+j).value;

    if (j == validate_Noof_columns) {
        row = table.insertRow(2); // •location of new row.
        for(var i = 0; i < colCount; i++) {       
        var text = window.document.getElementById('input'+i).value;
        var newcell = row.insertCell(i);
            if(i == (colCount - 1)) {  // Replace last column with delete button
newcell.innerHTML = "<INPUT type='button' value='X' onclick='removeRow(this)'/>"; break;
            } else  {
                newcell.innerHTML = text;
                window.document.getElementById('input'+i).value = '';
            }
        }   
    }else if (text != 'undefined' && text.trim() == ''){ 
        alert('input'+j+' is EMPTY');break;
    }  
}   }function removeRow(onclickTAG) {
// Iterate till we find TR tag. 
while ( (onclickTAG = onclickTAG.parentElement)  && onclickTAG.tagName != 'TR' );
        onclickTAG.parentElement.removeChild(onclickTAG);      }</script>

上面的脚本由“ Input0”向上运行。 对于每个表，输入将具有不同的名称EG：危险，风险，风险率。 是否可以更改上面的脚本，以便它可以处理每个表中的不同输入名称？ 我对Javascript领域还很陌生，到目前为止一直很喜欢，但是事实证明，这个问题很难破解。

非常感谢您的关注，希望您能提供一些见识！

Answer 1

在提出第一个问题之后，我设法通过不使用Javascript库提供轻量级页面加载来解决这个问题。

我创建了一个Codepen，重点介绍了如何在这里解决我的问题：

我还将下面使用的代码以纯文本格式放置：

第一表：

<table id="table1">
    <tr>
      <th>Area not inspected</th>
      <th>Reason</th>
      <th></th>
    </tr>
    <tr>
      <td><input name="area[0]" list="areaList" id="area"></td>
      <td><input name="reason[0]" list="reasonList" id="reason"></td>
      <td><button type="button" class="newRow">+</button></td>
    </tr>
  </table>
</section>

表2：

<table id="table2">
    <tr>
      <th>test01</th>
      <th>test02</th>
      <th></th>
    </tr>
    <tr>
      <td><input name="test[0]" list="areaList" id="test1"></td>
      <td><input name="test1[0]" list="reasonList" id="test2"></td>
      <td><button type="button" class="newRow">+</button></td>
    </tr>
  </table>
</section>

Table1的Javascript

function addRow() {
var table = document.getElementById("table1");
var r = table.rows.length;
var a = r - 1;
var row = table.insertRow(r);

var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "area[" + a + "]";
cell1.appendChild(element1);

var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "reason[" + a + "]";
cell2.appendChild(element2);

var cell3 = row.insertCell(2);
cell3.innerHTML = "<button type='button' onClick='delRow(&quot;table1&quot;, this)'>remove</button>";
}

function delRow(tableID, r) {
"use strict";
var td = r.parentNode;
var tr = td.parentNode;
var row = tr.rowIndex;
document.getElementById(tableID).deleteRow(row);
}

上面的代码与Table2相同，但是值略有变化。