CODEWITHSUNDEEP
javascriptjqueryhtml
Shauzab Ali Rawjani
Shauzab Ali Rawjani

Reputation: 256

copy selected values of rows that check box selection

<tr>
    <td>
        <input type = "checkbox" name = "chk"/>
    </td>
    <td>
        <select name = "foo">
            <option value = "1">One</option>
            <option value = "2">Two</option>
        </select>
    </td>
    <td>
        <select name = "bar">
            <option value = "1">One</option>
            <option value = "2">Two</option>
        </select>
    </td>
</tr>

<tr>
    <td>
        <input type = "checkbox" name = "chk"/>
    </td>
    <td>
        <select name = "foo">
            <option value = "1">One</option>
            <option value = "2">Two</option>
        </select>
    </td>
    <td>
        <select name = "bar">
            <option value = "1">One</option>
            <option value = "2">Two</option>
        </select>
    </td>
</tr>

I want to clone the row with selected items whose check box is checked.

I was using this but it is only copying the text fields and not the selected items. 

lastRow = $('#dataTable tr').has('input:checked').html();
$('#dataTable tr:last').after('<tr>'+lastRow+'</tr>');
$('#dataTable tr:last').find('select').each(function()
{
    var this_select=$(this);
    this_select.val(this_select.closest('tr').prev().find('td:eq('+this_select.closest('td').index()+')').find('select').val());
});

Upvotes: 1

Views: 1445

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388366

Try something like

var srcrow = $('#dataTable tr').has('input:checked');
var lastRow = srcrow.clone();

lastRow.find('select').each(function(idx, el){
    var $el = $(el);
    $el.val(srcrow.find('select').eq(idx).val())
});

$('#dataTable tr:last').after(lastRow);

Demo: Fiddle

A little more complicated implementation which support for multiple checked items

Demo: Fiddle

Upvotes: 3

Related Questions