Inserting row with irregular table using javascript

Question

I have this table:

<table class="w-full border ">
                    <caption class="text-start mx-2 text-lg font-semibold">
                      A. Specify Modules to be developed or modified:
                    </caption>
                    <tbody>
                      <tr>
                        <th rowspan="3" scope="rowgroup" class="border-black border">1</th>
                        <th scope="row" class="border-black border"><input type="text" placeholder="Module Name" class="placeholder:italic font-normal text-xs w-full p-1" /></th>
                      </tr>
                      <tr>
                        <th scope="row" class="border-black border"><input type="text" placeholder="Module Description" class="placeholder:italic font-normal text-xs w-full p-1" /></th>
                      </tr>
                    </tbody>
</table>

Is there a way to insert a row where <th rowspan="3" scope="rowgroup" class="border-black border">1</th> is incrementing and to insert is by this button:

image

I tried using jspreadsheet but i was hoping that there could be a solution by using javascript only.

Answer 1

Let's see how we can solve this :

• We have 2 methods, one for add new and another for remove row
• Variable rowIndex can use for dynamic field id (id="moduleName_+rowIndex+" ) and to give an ID to each row id="row_+rowIndex+"
• We can simplify the table html and set an ID for table body id="tableBody"
• We can then set and remove table rows based on user click Add more / remove

var rowIndex = 1;
    const removeRow  = (index) => {
        let  elementToRemove = document.getElementById('row_'+index);
        if (elementToRemove) {
            elementToRemove.remove();
        } else {
            console.log('Element not found.');
        }
    }
    const addNewRow = () => {

        let removeLink = (rowIndex === 1) ? "" : `<a href="javascript:void(0)" onclick="removeRow(`+ rowIndex+`)" >remove</a>`;
        let tableBody = document.getElementById("tableBody");
        let newRow = tableBody.insertRow();
        newRow.id = "row_" + rowIndex;

        let cell1 = newRow.insertCell(0);
        let cell2 = newRow.insertCell(1);

        cell1.innerHTML = `<input type="text" id="moduleName_`+rowIndex+`" placeholder="Module Name" class="placeholder:italic font-normal text-xs w-full p-1" />`;
        cell2.innerHTML = `<input type="text" id="moduleDescription_`+rowIndex+`" placeholder="Module Description" class="placeholder:italic font-normal text-xs w-full p-1" /> `+removeLink;
        tableBody.appendChild(newRow);

        rowIndex++;
    }

    document.addEventListener('DOMContentLoaded', function() {
        addNewRow();
    });

<table class="w-full border">
    <caption class="text-start mx-2 text-lg font-semibold">
        A. Specify Modules to be developed or modified:
    </caption>
    <tbody id="tableBody">
    <tr>
        <th>Module Name</th>
        <th>Module Description</th>
    </tr>
    </tbody>
</table>
<a href="javascript:void(0)" onclick="addNewRow()">Add More</a>