Samudrala Ramu Samudrala Ramu - 2 months ago 4
CSS Question

how to get cells as form of a record in to other table

I am Trying To Add cells (selected user wish) form of a record from user list to final list table when user clicks on GET RECORD Button Type Of Div. how to approach this functionality?, i am new for this type of functionality please help me anybody , sorry for my bad English.



$(document).ready(function() {
$('#table-txt td').mouseover(function() {
$(this).addClass('td-bg');
});
$('#table-txt td').mouseout(function() {
$('td').removeClass('td-bg');
});
$('#table-txt td').click(function() {
$('#table-txt td').removeClass('td-bg');
$(this).toggleClass('active');
});
$('#getrow').click(function() {
getrecord();
});
});

function getrecord() {
alert('How to get that Record to second table');
}

table,
tr,
th,
td {
border: 1px solid #dddddd;
border-collapse: collapse;
}
.td-bg {
background: #006597;
color: #fff;
opacity: 0.7;
cursor: pointer;
}
.block-header {
background: #006597;
color: #fff;
}
.block-header th {
text-align: center;
}
.active {
background: #006597;
color: #fff;
}
.addrow {
width: 10%;
height: 125px;
background: #006597;
float: left;
text-align: center;
color: #fff;
line-height: 100px;
cursor: pointer;
word-wrap: break-word;
overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
<tr class="block-header">
<th colspan="4">User List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
</table>
<div class="addrow" id="getrow">GET RECORD</div>
<table style="width:45%; float:right;">
<tr class="block-header">
<th colspan="4">Final List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</table>





enter image description here

Answer

I have used cellIndex and parentNode.rowIndex to trigger the positions and stored the selected values in an array using map() function.

Check this snippet:

$(document).ready(function() {
    $('#table-txt td').click(function() {
        $(this).addClass('td-bg');
        var arr = $(this).map(function() {
            return $(this).text();
        }).get();
        $(this).each(function() {
            var rI = this.cellIndex;
            var cI = this.parentNode.rowIndex;
            var sel = $('#table-right tr:eq(' + cI + ') td:eq(' + rI + ')');

            $('#getrow').click(function() {
                $('td').removeClass('td-bg');
                sel.html(arr);
            });
        });
    });
});
table,
tr,
th,
td {
    border: 1px solid #dddddd;
    border-collapse: collapse;
}
.td-bg {
    background: #006597;
    color: #fff;
    opacity: 0.7;
    cursor: pointer;
}
.block-header {
    background: #006597;
    color: #fff;
}
.block-header th {
    text-align: center;
}
.active {
    background: #006597;
    color: #fff;
}
.addrow {
    width: 10%;
    height: 125px;
    background: #006597;
    float: left;
    text-align: center;
    color: #fff;
    line-height: 100px;
    cursor: pointer;
    word-wrap: break-word;
    overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
    <tr class="block-header">
        <th colspan="4">User List</th>
    </tr>
    <tr height="25" class="block-header">
        <th width="25%">Name</th>
        <th width="25%">Age</th>
        <th width="25%">Gender</th>
        <th width="25%">Salary</th>
    </tr>
    <tr height="25">
        <td>Samudrala</td>
        <td>50</td>
        <td>M</td>
        <td>XYZ</td>
    </tr>
    <tr height="25">
        <td>Samudrala</td>
        <td>51</td>
        <td>F</td>
        <td>PQR</td>
    </tr>
    <tr height="25">
        <td>Samudrala</td>
        <td>52</td>
        <td>M</td>
        <td>ABC</td>
    </tr>
</table>
<div class="addrow" id="getrow">GET RECORD</div>
<table style="width:45%; float:right;" id="table-right">
    <tr class="block-header">
        <th colspan="4">Final List</th>
    </tr>
    <tr height="25" class="block-header">
        <th width="25%">Name</th>
        <th width="25%">Age</th>
        <th width="25%">Gender</th>
        <th width="25%">Salary</th>
    </tr>
    <tr height="25">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr height="25">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr height="25">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Comments