Question

我已经制作了下面的表结构。每当我使用javascript点击add1链接时，如何动态添加此表的第二列？整列从上到下。这一列必须一次又一次地重复

这是我的HTML：

<table id="datble" class="form" border="1">
    <tbody>
        <tr>                
            <td><a href="">Add1</a>
            </td>
            <td>
                <label>Name</label>
                <input type="text" required="required" name="BX_NAME[]">
            </td>
        </tr>
        <tr>
            <td><a href="">Add2</a>
            </td>
            <td>
                <label>Name</label>
                <input type="text" required="required" name="BX_NAME[]">
            </td>
        </tr>
        <tr>
            <td<a href="">Add3</a>
            </td>
            <td>
                <label>Name</label>
                <input type="text" required="required" name="BX_NAME[]">
            </td>
            <td>
                <label>Name</label>
                <input type="text" required="required" name="BX_NAME[]">
            </td>
        </tr>
        <tr>
            <td><a href="">Add4</a>
            </td>
            <td>
                <label>Name</label>
                <input type="text" required="required" name="BX_NAME[]">
            </td>
        </tr>
    </tbody>
</table>

Answer 1

您需要将一个函数绑定到链接的点击事件。在该函数中，您需要遍历每一行，找到要添加列的位置，然后插入它。

$(function(){
    // bind the function to the click event
    $("#add1").on("click", function(){
        // iterate through each row
        $("table tbody tr").each(function(){
            // insert the column HTML at the desired point
            $(this).children().first().after("<td>New Column</td>");
        });
    });
});

DEMO

如果要在点击时添加所有链接，请在jQuery中将#add1替换为.add。

Answer 2

我创建了一个JavaScript函数，可以在表中添加一行。

我还删除了<p>代码，因为它不是有效的HTML，没有任何视觉差异。

<table id="datble" class="form" border="1">
    <tbody>
        <tr>
            <td><a href="#" onclick="addColumn(this);">Add 1</a></td>
            <td>
                <label>Name</label>
                <input type="text" required="required" name="BX_NAME[]" />
            </td>
        </tr>
        <tr>
            <td><a href="#" onclick="addColumn(this);">Add 2</a></td>
            <td>
                <label>Name</label>
                <input type="text" required="required" name="BX_NAME[]" />
            </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    function addColumn(element) {
        var tr = element.parentElement.parentElement;
        var td = document.createElement("td");
        td.innerHTML = '<label>Name</label>';
        td.innerHTML += '<input type="text" required="required" name="BX_NAME[]" />';
        tr.appendChild(td);
    }
</script>

编辑：对不起，我误会了，以为你想添加一行。我更改了代码以添加列。

编辑2：我更改了代码，以便您可以在多行上使用它。

如何动态创建表？

2 个答案: