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
– Dhaval Marthak

2013-06-21 12:00:04 +00:00
Commented Jun 21, 2013 at 12:00 — Dhaval Marthak
– Dhaval Marthak, Commented Jun 21, 2013 at 12:00
you forget to close mode dropdown

Roopendra
– Roopendra

2013-06-21 12:03:40 +00:00
Commented Jun 21, 2013 at 12:03 — Roopendra
– Roopendra, Commented Jun 21, 2013 at 12:03
i corrected it. no change in output

Shauzab Ali Rawjani
– Shauzab Ali Rawjani

2013-06-21 12:06:53 +00:00
Commented Jun 21, 2013 at 12:06 — Shauzab Ali Rawjani
– Shauzab Ali Rawjani, Commented Jun 21, 2013 at 12:06

Adil Shaikh · Accepted Answer · 2013-06-21 12:29:48Z

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, 2013 at 12:29

answered Jun 21, 2013 at 12:17

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yotam Omer · Accepted Answer · 2013-07-06 19:13:15Z

1

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

edited Jul 6, 2013 at 19:13

Yotam Omer

15.4k11 gold badges65 silver badges65 bronze badges

answered Jul 6, 2013 at 18:54

Sankar

111 bronze badge

Comments

M.G.Manikandan · Accepted Answer · 2013-06-21 12:17:22Z

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, 2013 at 12:17

M.G.Manikandan

9935 silver badges7 bronze badges

Comments

marc_s · Accepted Answer · 2017-02-12 19:52:06Z

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, 2017 at 19:52

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jun 21, 2013 at 12:10

sangram parmar

8,7862 gold badges26 silver badges48 bronze badges

Collectives™ on Stack Overflow

add previous row data to dynamically generated row

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related