Javascript 如何动态生成新表列

此时，只有一个单元格被添加到单击链接的行中，并且底部的列未显示。 我希望下面的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>

名称
名称
名称
函数addColumn（元素）{
var tr=element.parentElement.parentElement；
var td=document.createElement（“td”）；
td.innerHTML='Name'；
td.innerHTML+=''；
tr.appendChild（td）；
}

我一直在尝试以下代码：

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

函数appendColumn（）{
var tbl=document.getElementById（'my_table'）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var colCount=table.rows[0].cells.length；
对于（变量i=0；i

但它不能做到这一点。 jquery也很受欢迎

看看jquery

   $('#datble').find('tbody').append('<tr><td>TD 1</td><td>TD 2</td></tr>');
   //or you can prepend
   $('#datble').find('tbody').prepend('<tr><td>TD 1</td><td>TD 2</td></tr>');

$（'datable'）。查找（'tbody'）。追加（'TD 1TD 2'）；
//或者你可以预先准备好
$（“#datable”）.find（'tbody'）.prepend（'TD 1TD 2'）；

您也可以通过jquery来尝试：

var html = "";

之后

如果我理解正确，你需要这样的东西：

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

函数addColumn（元素）{
var tr=element.parentElement.parentElement；
var trs=tr.parentElement.querySelectorAll（“tr”）；
var trN=nInArray（trs，tr）；
var tds=trs[trs.length-1]。查询选择器all（“td”）；
var tdNextN=parseInt（tds[tds.length-1].querySelector（“input”）.name.match（/BX（\d+）\u name\[\]/）[1]）；
如果（trN==0）{
tdNextN++；
}
对于（变量i=0；i=trN）{
td.innerHTML=“Name”+tdNextN+”；
td.innerHTML+=“”；
}
trs[i].appendChild（td）；
}
}
函数数组（数组，对象）{
对于（var i=0；i

我认为这是必需的：

function addColumn(element) {
    var tr = $(element).closest("tr")[0];
    var allTrs = $(tr).closest("table").find("tr");
    var found = false;
    allTrs.each(function(index, item) { 
        if (item == tr) {
            found = true;
        }
        var td = document.createElement("td");
        if (found) {
            td.innerHTML = '<label>Name</label>';
            td.innerHTML += '<input type="text" required="required" name="BX_NAME[]" />';
        }
        item.appendChild(td);
    });
}

函数addColumn（元素）{
var tr=$（元素）。最近的（“tr”）[0]；
var allTrs=$（tr）.最近的（“表”）.查找（“tr”）；
var=false；
所有trs.each（函数（索引，项）{
如果（项目==tr）{
发现=真；
}
var td=document.createElement（“td”）；
如果（找到）{
td.innerHTML='Name'；
td.innerHTML+=''；
}
项目.儿童（td）；
});
}

---

这会将行而不是列添加到表中。您可以使用$（'#datable'）.find（'tr:nth child（n）'）.find（'td:nth child（n）'）。after（''）；//或在（“”）之前；n必须替换为numberThanks您得到了我所需要的。+3但它不能与jquery最新插件一起使用。您能将其更改为javascript吗code@user3253289你是说jQuery的最新版本吗？我在一个新页面上尝试过：jQuery-latest.js，但我看不到任何操作。请给我一个链接，指向你使用的jQuery版本Hanks你的贡献。+2表示接近。它不显示较低的单元格。在哪个浏览器和系统中？在我所有的5个windows浏览器中，它的代码会在表中添加一列。它只显示我用标签和输入单击过的单元格的行列，但对于下面的单元格，它不会显示。查看上面勾选的答案，你会看到操作的不同如果你单击

n

行，然后在

n

中，

n+1

，

n+2

等。行添加了输入。。。我一个问题都不懂。对答案做了一些修改。@ostapishe我看不见你胡闹

$('#' + table_id ).append(html);

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

function addColumn(element) {
    var tr = $(element).closest("tr")[0];
    var allTrs = $(tr).closest("table").find("tr");
    var found = false;
    allTrs.each(function(index, item) { 
        if (item == tr) {
            found = true;
        }
        var td = document.createElement("td");
        if (found) {
            td.innerHTML = '<label>Name</label>';
            td.innerHTML += '<input type="text" required="required" name="BX_NAME[]" />';
        }
        item.appendChild(td);
    });
}