如何將單元格作爲記錄的形式存入其他表中？

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> 
 
\t <div class="addrow" id="getrow">GET RECORD</div> 
 
\t <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> 
 
\t <tr height="25"> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
\t <tr height="25"> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     
 
     </table>

Answer 1

我已經做了一些修改您的密碼（你的表標記等），我想它做你想要的這裏是我的最終代碼：

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

Answer 2

您可以使用cellIndex和parentNode.rowIndex觸發位置並存儲選擇使用map()函數的數組中的d值。

檢查這個片段：

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