Doubleclick table1 row appends to table2 row

JavaScript
1

hey guys. so i was thinking of creating this page that has 2 different tables : table1(table1 filled with names that are populated from database but lets not think about that part for now) and table2(empty), table1 rows are clickable and when doubleclick on one row the data in that row appends to table2 row but i would like that to also work on table2(moves from table2 to table1). obviously there are other functions that i would like these 2 tables to do but in order to do that i need to figure out the doubleclick functions. I am also wondering how to structure table2 as there is no data how do i fix the rows? i was thinking maybe

<tr><td><input type=“textbox” name=“guest” style=“border:none;outline:none”></td></tr>

but then i know that that is not the right way or acceptable way to do it.

simple tables


<table class="table1">
    <thead><th>Name</th></thead>
    <tbody>
        <tr><td>Nadia</td></tr>
    </tbody>
</table>
<table class="table2">
    <thead><th>Guest</th></thead>
    <tbody>
        <tr><td><input type="textbox" name="guest" id="guest1"></td></tr>
    </tbody>
</table>

the double click code would be something like this(i guess)


<script>
$(".table1 tr").dblclick(function () {
$(".table1 tr.clicked").removeClass("clicked").appendTo('.table2 #guest1');
});
</script>

and so that the rows are clickable i have to add selectable(), right? or wrong?


<script>
    $(function() {
        $( ".table1 tr" ).selectable();
    });
    </script>

pointers/ideas/advice/suggestion are much appreciated.

ps: as i said in table1 in future the names would be populated from database but for learning purposes the name is fixed.

2

Hi,

Attach the event handler to the cells, then append the parent to whichever table is not being clicked on:

<table id="table_1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Text 1A</td>
        <td>Text 1B</td>
        <td>Text 1C</td>
    </tr>
    <tr>
        <td>Text 2A</td>
        <td>Text 2B</td>
        <td>Text 2C</td>
    </tr>
    <tr>
        <td>Text 3A</td>
        <td>Text 3B</td>
        <td>Text 3C</td>
    </tr>
    <tr>
        <td>Text 4A</td>
        <td>Text 4B</td>
        <td>Text 4C</td>
    </tr>
</table>

<table id="table_2">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</table>

$("td").on("dblclick", function(){
    var currTable = $(this).closest("table").attr("id"),
        destinationTable = (currTable.match(/1/))? "#table_2" : "#table_1";
    $(destinationTable).append($(this).parent());
});

Demo

3

omg, i love you! thanks you so much i will try it in a bit

4

how come it doesn’t work when the table is wrapped in a div?

5

Dunno. Probably something to do with the selector.
Can you post the code which isn’t working.

6

i just added the div to wrap the tables coz my real tables are gonna have divs nothing else is changed.


<div>
<table id="table_1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Text 1A</td>
        <td>Text 1B</td>
        <td>Text 1C</td>
    </tr>
    <tr>
        <td>Text 2A</td>
        <td>Text 2B</td>
        <td>Text 2C</td>
    </tr>
    <tr>
        <td>Text 3A</td>
        <td>Text 3B</td>
        <td>Text 3C</td>
    </tr>
    <tr>
        <td>Text 4A</td>
        <td>Text 4B</td>
        <td>Text 4C</td>
    </tr>
</table>
</div>

<div>
<table id="table_2">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</table>
</div>



$("td").on("dblclick", function(){
    var currTable = $(this).closest("table").attr("id"),
        destinationTable = (currTable.match(/1/))? "#table_2" : "#table_1";
    $(destinationTable).append($(this).parent());
});
7

Works for me :slight_smile:

Updated demo

8

its weird. like if i change the table id(which is the only thing i changed) to something else :

stable
and
gtable
i even change the ids in the script

 destinationTable = (currTable.match(/1/)) ? "#table_2" : "#table_1";

to their respective ids

 destinationTable = (currTable.match(/1/)) ? "#gtable" : "#stable";

it just wont work. td from “stable” doesnt move to td of “gtable”. the rows in “stable” just kinds of sorts it self, like row1 goes down to row4 when row1 dbclick. thats kinda strange.

update 2

9

It’s not :slight_smile:

In my example I have #table_1 and #table_2

This line:

destinationTable = (currTable.match(/1/)) ? "#table_2" : "#table_1";

tries to match the digit “1” in the table id (i.e. “table_1” would match, “table_2” wouldn’t).
Based on the match (or lack thereof), it works out which table to append the row to.

You might try something like:

destinationTable = (currTable.match(/stable/)) ? "#gtable" : "#stable";
10

oh… okay so if i was to put “2” or even “table_2” then table_2 would match?

11

Not sure what you mean. Put it where?

12

sorry. i meant:

if i was to put “2” or even “table_2” then table_2 would match?

destinationTable = (currTable.match(/2/)) ? "#table_1" : "#table_2";

destinationTable = (currTable.match(/table_2/)) ? "#table_1" : "#table_2";

just wondering.

13

No, that doesn’t make sense.

Let’s lose the ternary conditional:

if(currTable.attr("id") === "table_1"){
  destinationTable = "#table_2";
} else {
  destinationTable = "#table_1";
}

Does that help?

To make the fiddle form post 8 work, do this:

destinationTable = (currTable.match(/[B]stable[/B]/)) ? "#gtable" : "#stable";
14

ohh… okay understand. got it. thanks pullo.