add previous row data to dynamically generated row

Question

I have a table. onchange of select variable, it generates rows. what i want to do is that, the data which i wrote in the first row, should be copied in the generated rows. This is my Table and the java script.

<form>
    <table border = "1" id = "engagements">
        <tr>
            <th><input type="checkbox" onclick="checkAll(this)"></th>
            <th>Organization</th>
            <th>Project</th>
            <th>Product</th>
            <th>Activity</th>
        </tr>
        <tr>
            <td><input type="checkbox" onclick="checkAll(this)"></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <!--
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            <td><input type = "text"/></td>
            -->
        </tr>
    </table>

    <select name = "mode" id = "mode" onchange="addrow('engagements')">
        <option value="">Add More Rows with Same Data as Above</option>
        <option value="1">1 More</option>
        <option value="2">2 More</option>
        <option value="3">3 More</option>
        <option value="4">4 More</option>
        <option value="5">5 More</option>
     </select>

</form>


<script language="javascript">
    function addrow(tableID)
    {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        var e = document.getElementById("mode");
        var strUser = e.options[e.selectedIndex].value;

        for (var j = 0; j < strUser; j++)
        {
            for (var i = 0; i < colCount; i++)
            {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            }
            var row = table.insertRow(rowCount);
        }
    }
</script>

Can you setup a fiddle for this? – Dhaval Marthak Jun 21 '13 at 12:00 — Dhaval Marthak, Jun 21 '13 at 12:00
you forget to close mode dropdown – Roopendra Jun 21 '13 at 12:03 — Roopendra, Jun 21 '13 at 12:03
i corrected it. no change in output – Shauzab Ali Rawjani Jun 21 '13 at 12:06 — Shauzab Ali Rawjani, Jun 21 '13 at 12:06

Adil Shaikh · Accepted Answer · 2013-06-21T12:29:48.830

2

If you are already using jQuery , You can do this -

$("#mode").on('change', function () {
    var rows = parseInt(this.value);
    var lastRow;
    for (var i = 0; i < rows; i++) {
        lastRow = $('#engagements tr').last().clone();
        $('#engagements tr').last().after(lastRow);
    }
});

Demo ----> http://jsfiddle.net/jW6eL/

edited Jun 21 '13 at 12:29

answered Jun 21 '13 at 12:17

Adil Shaikh

44,509
17
89
111

score 1 · Answer 2 · edited Jul 06 '13 at 19:13

1

$('#step_table').append($('#step_table tr:last td:last').html());

edited Jul 06 '13 at 19:13

Yotam Omer

15,310
11
62
65

answered Jul 06 '13 at 18:54

Sankar

11
1

score 0 · Answer 3 · edited Feb 12 '17 at 19:52

0

Replace your function with this function (jQuery solution):

function addrow(tableID)
{
    var table=$('#'+tableID);
    var val1=$('#mode').val();

    for(i = 0; i < parseInt(val1); i++)
    {
        table.find('tr:last').after('<tr>'+table.find('tr:last').html()+'</tr>');
    }
}

edited Feb 12 '17 at 19:52

marc_s

732,580
175
1,330
1,459

answered Jun 21 '13 at 12:10

sangram parmar

8,462
2
23
47

score 0 · Answer 4 · answered Jun 21 '13 at 12:17

0

Try this

function addrow(tableID)
{
  var $table = $('#' + tableID);
  var noOfRows = parseInt($('#mode').val());
  var $clonedRow = $table.find('tr:last');
  for(var i = 0; i < 5; i++) {
    $clonedRow.clone().appendTo($table);
  }
}

answered Jun 21 '13 at 12:17

M.G.Manikandan

953
5
7

add previous row data to dynamically generated row

4 Answers4

Linked