javascript - 如何动态创建新的表列

Question

目前只有一个单元格被添加到点击链接的行中，底部的列没有显示。我希望下面的 js 代码能够工作，这样如果我单击任何链接说链接 2，除了从与此链接 2 内联的单元格和新创建的列下方的单元格开始外，不会显示列中的顶部单元格。

<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>
    <tr>
        <td><a href="#" onclick="addColumn(this);">Add 3</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>

我一直在尝试这段代码:

  function appendColumn() {
    var tbl = document.getElementById('my_table');
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for (var i = 0; i < tbl.rows.length; i++) {
        var newcell = tbl.rows[i].insertCell(tbl.rows[i].cells.length);
        for (var j = 0; j < colCount; j++) {
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    }
}

但它并没有这样做。也欢迎 jquery

Answer 1

jsFiddle
如果我正确理解你需要这样的东西:

function addColumn(element) {
    var tr = element.parentElement.parentElement;
    var trs = tr.parentElement.querySelectorAll( "tr" );
    var trN = nInArray( trs, tr );
    var tds = trs[ trs.length - 1 ].querySelectorAll( "td" );
    var tdNextN = parseInt( tds[ tds.length - 1 ].querySelector( "input" ).name.match( /BX(\d+)_NAME\[\]/ )[ 1 ] );
    if ( trN == 0 ) {
        tdNextN++;
    }
    for ( var i = 0; i < trs.length; i++ ) {
        var td = document.createElement( "td" );
        if ( i >= trN ) {
            td.innerHTML = "<label>Name" + tdNextN + "</label>";
            td.innerHTML += "<input type=\"text\" required=\"required\" name=\"BX" + tdNextN + "_NAME[]\" />";
        }
        trs[ i ].appendChild( td );
    }
}
function nInArray( array, object ) {
    for ( var i = 0; i < array.length; i++ ) {
        if ( array[ i ] === object ) {
            return i;
        }
    }
    return -1;
}