CODEWITHSUNDEEP
javascriptjquery
user3253289
user3253289

Reputation: 63

how to make new table columns dynamically

At the moment only a cell is added to theclicked link's row and the bottom columns are not shown. i would like the js code below to work such that if i click onany link say link 2 none of the top cells in the column are displayed apart from starting with the one inline with this link 2 and those below in the newly created column.

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

I have been trying out this code:

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

but it doesn't do it. jquery is also welcome

Upvotes: 1

Views: 227

Answers (4)

ostapische
ostapische

Reputation: 1592

jsFiddle
If I correctly understood you need something like this: 

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

Upvotes: 1

Regent
Regent

Reputation: 5176

And that's what I think is required:

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

Upvotes: 1

Samjack
Samjack

Reputation: 188

You can also try this throught jquery:

var html = "";

after

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

or

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

and after all do this

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

Upvotes: 0

Vicky
Vicky

Reputation: 613

Take a look of 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>');

Upvotes: 0

Related Questions