将表格行数据从对话框窗口传递到主页表格

Question

This is table on main page :

 <table>
        <th>Apple</th>
        <th>Ball</th>
        <tr>
            <td><input type="text" /></td>
            <td><input type="button" /><a href="#"></a></td>
        </tr>
         <tr>
            <td><input type="text" /></td>
            <td><input type="button" /><a href="#"></a></td>
        </tr>
    </table>

This is table on window dialog :

<table>
        <th>Apple on Dialog</th>
        <th>Ball on Dialog</th>
        <tr>
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
        </tr>
         <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
        </tr>
    </table>

see this FIDDLE , not for working code but for wanted result page,because I don't know how to create window dialog on jsfiddle so bare with my fiddle. Thanks everyone.

Answer 1

Please check this JSFIDDLE

You have to save/pass the clicked btn's identity to the dialog so that it knows where to copy and paste the content. Hope the jsfiddle gives you some idea

$(document).ready(function(){
    $('#1, #2').click(function(){
        window.clickedbtnid = $(this).attr('id');
        $( "#table_dialog_1" ).dialog();
    });
    $( "#table_dialog_1" ).find('td').click(function(){
        $('#'+window.clickedbtnid).parent().prev().find('input').val($(this).text());
        $( "#table_dialog_1" ).dialog('close');
    })
});

Answer 2

You need to add a click event for buttons on the first table and assign the TD text to the input on the same row of the button.

$(document).ready(function(){
    $('#1, #2').on('click', function(){
        $("#table_dialog_1").dialog();
        var id = $(this).attr('id');
        $('#table_dialog_1 td').unbind('click').on('click', function(){
            console.log('#input_'+id);
            $('#input_'+id).attr('value', $(this).html());
            $('#table_dialog_1').dialog('close');
        });
    });
});

I unbind the click event inside on the first click event to remove previous events.

See the complete working example

If you need to work with popup instead of dialog, follow this simple tutorial

UPDATE

In order to use window.open() , in the parent window put this javascript code:

$('.clickMe').click(function(){
    clickedButton = this;
    $( "#table_dialog_1" ).dialog();
    window.button_clicked_id = $(this).attr('id');  
});

And this code in the child window.

var the_button = window.opener.button_clicked_id;
var clickedButton = $('#'+the_button, window.opener.document);
$( '#table_dialog_1 tr').click(function(){
    var  tds = $(this).children();
    $(clickedButton).parent().prev().find('input').val(tds.eq(0).html());
    $(clickedButton).next('a').text(tds.eq(2).html()+','+tds.eq(1).html());
    $( "#table_dialog_1" ).dialog('close');
});