Update Table with JavaScript & JQuery

Updating Table And printing on the page

by rounaksuthar

HTML

<!DOCTYPE html>
<html>
<head>
    <title>My Form</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="mytable" border="1">
            <tr>
                <th>select</th>
                <th>Id</th>
                <th>Name</th>
            </tr>
            <tr id='1'>
                <td><input type="checkbox" name="name1"></td>
                <td><input id="id1" type="text" value="1"></td>
                <td><input id="name1" type="text" value="rounak"></td>
            </tr>
            <tr id='2'>
                <td><input type="checkbox" name="name2"></td>
                <td><input id="id2" type="text" value="2"></td>
                <td><input id="name2" type="text" value="naren"></td>
            </tr>
        </table>
        <br>
    <button id="bt" type="submit">Update</button>
    <br>
<table id="mytable1" border="1"></table>
</body>
</html>

JavaScript

var id=[];
    var name1=[];

    $(function(){
    $("#bt").click(function(){
        $('#mytable input[type=checkbox]:checked').each(function(){
            var r1=$(this).closest('tr').attr('id');
            id.push(document.getElementById("id"+r1).value);
            name1.push(document.getElementById("name"+r1).value);
        });
        callme();	     
    });
});
    var cell1=[];
    var cell2=[];
    function callme() {
        var td1=document.getElementById('mytable1');
        td1.innerHTML="";
        var row=td1.insertRow();
        var id11=row.insertCell();
        var id12=row.insertCell();
        id11.innerHTML="Id";
        id12.innerHTML="Name";
        for(var i=0;i<id.length;i++)
        {
                row=td1.insertRow();
                cell1[i]=row.insertCell();
                cell2[i]=row.insertCell();
                cell1[i].innerHTML=id[i];
                cell2[i].innerHTML=name1[i].toString();         
        }

    }