使用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相同，但是值略有變化。