用于生成表格行的 JavaScript

Posted 2023-03-05

【中文标题】用于生成表格行的 JavaScript

【英文标题】：JavaScript for generate table row

【发布时间】：2015-02-01 03:28:54

【问题描述】：

我对 javascript 和 html 有疑问；我有一个只有一行的表，我想使用 JavaScript 添加额外的一行。我的脚本工作正常，但我的问题是我想要任何 textbox 的不同 ID。

我不熟悉 JavaScript。

最后我想将我的文本框数据插入 MSSQL。

我的代码：

<SCRIPT language="javascript">
    function addRow(tableID) 

        var table = document.getElementById(tableID);

        var row = table.insertRow();

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        cell1.appendChild(element1);

        var cell3 = row.insertCell(1);
        var element2 = document.createElement("input");
        cell3.appendChild(element2);

        var cell4 = row.insertCell(2);
        var element3 = document.createElement("input");
        cell4.appendChild(element3);

        var cell5 = row.insertCell(3);
        var element4 = document.createElement("input");
        cell5.appendChild(element4);

        var cell6 = row.insertCell(4);
        var element5 = document.createElement("input");
        cell6.appendChild(element5);
    
</SCRIPT>

和我的html：

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<table id="dataTable">
    <caption>
        <asp:Label ID="Label1" runat="server" Font-Size="Small" ForeColor="Red"></asp:Label>
    </caption>
    <tr>
        <td>
            <asp:TextBox ID="TextBoxFam_name" runat="server"></asp:TextBox><br />
        </td>
        <td>
            <asp:TextBox ID="TextBoxFam_relation" runat="server"></asp:TextBox><br />
        </td>
        <td>
            <asp:TextBox ID="TextBoxFam_age" runat="server"></asp:TextBox><br />
        </td>
        <td>
            <asp:TextBox ID="TextBoxFam_education" runat="server"></asp:TextBox><br />
        </td>
        <td>
            <asp:TextBox ID="TextBoxFam_statuse" runat="server"></asp:TextBox><br />
        </td>
    </tr>
</table>

感谢有关其他脚本或其他解决方案的建议。

【参考方案1】：

var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.id = 'your_id';
cell1.appendChild(element1);

【讨论】：

其他元素也可以这样用吗？

您可以将id属性设置为所有元素。

我尝试使用此代码并生成表格行，但我在我的 asp:panel 中使用脚本，我的问题是当我尝试隐藏我的面板时，该行消失了！！