Question

目前只有一个单元格被添加到被点击链接的行中，并且未显示底部列。我希望下面的js代码工作，如果我点击任何链接说链接2显示列中没有顶部单元格，而不是从内联此链接2的内容开始，以及新创建的列中的内容。 / p>

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

Answer 2

这就是我认为的要求：

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

Fiddle with this

Answer 3

看看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>');

Answer 4

你也可以通过jquery尝试这个：

var html = "";

后

html += '<tr><td>TD</td></tr>';

或

html += '<tr>'; 
html += '<td>';
html += 'TD';
html += '</td>';    
html += '</tr>';

毕竟这样做

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

如何动态创建新表列

4 个答案: