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>

以上脚本由＆lt; Input0＆＃39;运行向上。对于每个表，输入将具有不同的名称， 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>

表1的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相同，但值稍有变化。

使用Javascript

1 个答案: