JavaScript - Transfer Rows Between Two Table

How To Export Selected Rows Between Two HTML Table In Javascript

Export Rows Between Two HTML Table In JS


In This Javascript Tutorial we will See How To Get Checked  HTML Table Rows Using Radio Button And Export Them To Another HTML Table In JS And Netbeans Editor .


Project Source Code:


<!DOCTYPE html>
<html>
    <head>
        <title>Transfer Rows Between Two HTML Table</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{overflow: hidden}
            .tab{float: left}
            .tab-btn{margin: 50px;}
            button{display:block;margin-bottom: 20px;}
            tr{transition:all .25s ease-in-out}
            tr:hover{background-color: #ddd;}
            
        </style>    
    </head>
    <body>
        
        <div class="container">
            
            <div class="tab">
                <table id="table1" border="1">
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Age</th>
                        <th>Select</th>
                    </tr>
                    <tr>
                        <td>A1</td>
                        <td>B1</td>
                        <td>C1</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A2</td>
                        <td>B2</td>
                        <td>C2</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                    <tr>
                        <td>A3</td>
                        <td>B3</td>
                        <td>C3</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A4</td>
                        <td>B4</td>
                        <td>C4</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A5</td>
                        <td>B5</td>
                        <td>C5</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A6</td>
                        <td>B6</td>
                        <td>C6</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A7</td>
                        <td>B7</td>
                        <td>C7</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A8</td>
                        <td>B8</td>
                        <td>C8</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A9</td>
                        <td>B9</td>
                        <td>C9</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                     <tr>
                        <td>A10</td>
                        <td>B10</td>
                        <td>C10</td>
                        <td><input type="checkbox" name="check-tab1"></td>
                    </tr>
                </table>
            </div>
            
            <div class="tab tab-btn">
                <button onclick="tab1_To_tab2();">>>>>></button>
                <button onclick="tab2_To_tab1();"><<<<<</button>
            </div>
            
            <div class="tab">
                <table id="table2" border="1">
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Age</th>
                        <th>Select</th>
                    </tr>
                </table>   
            </div>
        </div>
        
        <script>
            
            function tab1_To_tab2()
            {
                var table1 = document.getElementById("table1"),
                    table2 = document.getElementById("table2"),
                    checkboxes = document.getElementsByName("check-tab1");
            console.log("Val1 = " + checkboxes.length);
                 for(var i = 0; i < checkboxes.length; i++)
                     if(checkboxes[i].checked)
                        {
                            // create new row and cells
                            var newRow = table2.insertRow(table2.length),
                                cell1 = newRow.insertCell(0),
                                cell2 = newRow.insertCell(1),
                                cell3 = newRow.insertCell(2),
                                cell4 = newRow.insertCell(3);
                            // add values to the cells
                            cell1.innerHTML = table1.rows[i+1].cells[0].innerHTML;
                            cell2.innerHTML = table1.rows[i+1].cells[1].innerHTML;
                            cell3.innerHTML = table1.rows[i+1].cells[2].innerHTML;
                            cell4.innerHTML = "<input type='checkbox' name='check-tab2'>";
                           
                            // remove the transfered rows from the first table [table1]
                            var index = table1.rows[i+1].rowIndex;
                            table1.deleteRow(index);
                            // we have deleted some rows so the checkboxes.length have changed
                            // so we have to decrement the value of i
                            i--;
                           console.log(checkboxes.length);
                        }
            }
            
            
            function tab2_To_tab1()
            {
                var table1 = document.getElementById("table1"),
                    table2 = document.getElementById("table2"),
                    checkboxes = document.getElementsByName("check-tab2");
            console.log("Val1 = " + checkboxes.length);
                 for(var i = 0; i < checkboxes.length; i++)
                     if(checkboxes[i].checked)
                        {
                            // create new row and cells
                            var newRow = table1.insertRow(table1.length),
                                cell1 = newRow.insertCell(0),
                                cell2 = newRow.insertCell(1),
                                cell3 = newRow.insertCell(2),
                                cell4 = newRow.insertCell(3);
                            // add values to the cells
                            cell1.innerHTML = table2.rows[i+1].cells[0].innerHTML;
                            cell2.innerHTML = table2.rows[i+1].cells[1].innerHTML;
                            cell3.innerHTML = table2.rows[i+1].cells[2].innerHTML;
                            cell4.innerHTML = "<input type='checkbox' name='check-tab1'>";
                           
                            // remove the transfered rows from the second table [table2]
                            var index = table2.rows[i+1].rowIndex;
                            table2.deleteRow(index);
                            // we have deleted some rows so the checkboxes.length have changed
                            // so we have to decrement the value of i
                            i--;
                           console.log(checkboxes.length);
                        }
            }
            
        </script>    
        
    </body>
</html>


OUTPUT:

Change Rows Between Two HTML Table Using Javascript




Share this

Related Posts

Previous
Next Post »

1 comments:

comments
4 juillet 2018 à 12:53 delete

Thx. But have problems when i fetch data from sql to table 1, select and transfer to table2. Cannot make auto complete column id in table 2. Please help

Reply
avatar