How To Transfer Rows Between Two HTML Table In Javascript [ with source code ]

How To Transfer Rows Between Two HTML Table In Javascript [ with source code ]

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 .

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 .

Subscribe : https://www.youtube.com/channel/UCS3W5vFugqi6QcsoAIHcMpw

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>

js javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

Ember.js vs Vue.js - Which is JavaScript Framework Works Better for You

In this article we will discuss full details and comparison of both Ember.js and Vue.js

Grokking Call(), Apply() and Bind() Methods in JavaScript

In this article, we will have a look at the call(), apply() and bind() methods of JavaScript. Basically these 3 methods are used to control the invocation of the function.

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.