如何将单元格作为记录的形式导入到其他表格中？

Question

我试图添加一个记录的单元格(选定的用户愿望)形式的记录从用户列表到最终列表表格，当用户点击获取记录按钮类型的分区。

如何实现此功能？

​

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

​

Answer 2

我已经对你的代码(你的表格标记等)做了一些修改，我认为它已经完成了你想要的，这里是我的最终代码：

     $(document).ready(function(){
        $('#table-txt td').mouseover(function(){
        $(this).addClass('td-bg');
        });
        $('#table-txt td').mouseout(function(){
        $('td').removeClass('td-bg');
        });
        $('#table-txt tr').click(function(){ //I modified this line
        $('#table-txt tr td').removeClass('td-bg');//And this
        $(this).toggleClass('active');
        });

        $('#getrow').click(function(){
            getrecord();
        });
});

  function getrecord(){
    var $trs = $('#table-txt tbody tr.active').clone(true);    
    $("#finalListTable tbody").append($trs); 
 }




    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">

    <thead>
        <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>
    </thead>
    <tbody>

        <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>
    </tbody>
</table>
<div class="addrow" id="getrow">GET RECORD</div>
<table id="finalListTable" style="width:45%; float:right;">

    <thead>
        <tr class="block-header">
            <th colspan="4">Final List</th>
        </tr>
        <tr>

            <th width="25%">Name</th>
            <th width="25%">Age</th>
            <th width="25%">Gender</th>
            <th width="25%">Salary</th>

        </tr>
    </thead>
    <tbody>

    </tbody>


</table>