javascript - 如何将单元格作为记录的形式获取到其他表中？

Question

当用户单击 GET RECORD 按钮类型的 Div 时，我正在尝试将用户列表中记录的单元格(选定的用户希望)形式添加到最终列表。

我怎样才能实现这个功能？

$(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>

Answer 1

您可以使用 cellIndex 和 parentNode.rowIndex 触发位置并使用 map() 函数将所选值存储在数组中。

检查这个片段:

$(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>