使用Javascript的多个动态HTML表

Question

Hi all I am wondering if you can help me with a bit of an issue I am having with creating dynamic tables. I am using HTML and Javascript to try and do this, it might turn out that Javascript is not the best way to do thi, if it isn't please can you advise?

I'm doing a project which involves multiple HTML tables in a form. What I would like to do is make it so if a user wishes to add new rows to each of the tables they can do so, and even and multiple rows if they so wish. This is how my HTML tables look currently, to give you an idea of what i'm working with:

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

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>

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 code

I am aware that I will need an individual call for a table element to be able to add multiple dynamic tables to a single webpage. The Javascript code below works for one table only, and adding any more tables breaks to script and am unable to add any new rows to any other tables on the webpage, even with the tags assigned.

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

The above script runs by 'Input0' upwards. For each table, the inputs will have a different name, EG: hazard, risk, riskrate. Would there be a way to change the above script so that it can process the different input names from each table? I am quite new to the Javascript scene, and am enjoying it so far, but this issue is proving quite hard to crack.

Many thanks for looking, and I hope you can offer some insight!

Answer 1

After the initial question, I have managed to get my head around this issue by not using Javascript Libraries to provide lightweight page load.

I have created a Codepen highlighting how I have tackled my issue here:

I have also put the code I have used in plain text below:

First Table:

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

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

Javascript for Table1

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);
}

The above code is the same for Table2, but with the values change a little.