使用 javascript 插入带有不规则表的行-解网

问：

我有这张表：

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

有没有办法通过这个按钮插入一行，其中正在递增并插入：<th rowspan="3" scope="rowgroup" class="border-black border">1</th>

图像

我尝试使用jspreadsheet，但我希望仅使用javascript可以解决问题。

javascript html-table 插入 tailwind-css

我们有 2 种方法，一种用于添加新的，另一种用于删除行
变量 rowIndex 可用于动态字段 ID （+rowIndex+）并为每行 +rowIndex+ 提供一个 IDid="moduleName_"id="row_"
我们可以简化表格 html 并为表格主体设置一个 IDid="tableBody"
然后，我们可以根据用户单击“添加更多/删除”来设置和删除表行

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>

使用 javascript 插入带有不规则表的行

Inserting row with irregular table using javascript

评论

评论