jQuery將動態添加的錶行值複製到下一行

Question

<table> 
    <tr> 
     <td>Name</td> 
     <td>Location</td> 
     <td>Date</td> 
     <td>Valid</td> 
     <td>Add</td> 
    </tr> 
    <tr class="tr_clone"> 
     <td> 
      <input type="text" > 
     </td> 
     <td> 
      <input type="text" > 
     </td> 
     <td> 
      <input type="text" class="datepicker"> 
     </td> 
     <td> 
      <input type="checkbox" > 
     </td> 
     <td> 
      <input type="button" name="add" value="Add"> 
     </td> 
    </tr> 
</table> 

我需要僅將錶行中的值（不包括輸入字段）插入表中的下一行。

請給出您寶貴的建議。

Answer 1

我給你的信息的東西

var localDb = []; 
 
var emptyVar = ''; 
 

 
(function(){ 
 

 
\t //define local storage 
 
\t var dataFiles = JSON.parse(localStorage.getItem('key')); 
 
\t console.log(dataFiles); 
 
\t if (dataFiles == null){ 
 
\t \t $('#no-data').show(); 
 
\t \t //alert('its working'); 
 
\t }else{ 
 
\t \t $('#no-data').hide(); 
 
\t \t $('.data-box').html('<table><tbody><tr><th>Serial No</th><th>Name</th><th>Age</th><th>Email</th><th>Address</th><th>Options</th></tr></tbody><tbody id="uploadFiles"></tbody></table>'); 
 
\t \t for (var i=0; i<dataFiles.length; i++){ 
 
\t \t \t localDb.push(dataFiles[i]); 
 
\t \t \t emptyVar += '<tr id="number'+i+'">'; 
 
\t \t \t emptyVar += '<td>'+i+'</td>'; 
 
\t \t \t emptyVar += '<td>'+dataFiles[i].name+'</td>'; 
 
\t \t \t emptyVar += '<td>'+dataFiles[i].age+'</td>'; 
 
\t \t \t emptyVar += '<td>'+dataFiles[i].email+'</td>'; 
 
\t \t \t emptyVar += '<td>'+dataFiles[i].address+'</td>'; 
 
\t \t \t emptyVar += '<td>'+'<input type="button" value="Remove" onclick="getId(this);" />'+'</td>'; 
 
\t \t \t emptyVar += '</tr>' 
 
\t \t }; 
 

 
\t \t $('#uploadFiles').html(emptyVar); 
 
\t }; 
 
})(); 
 

 
function add(){ 
 
\t var name = $('#name').val(); 
 
\t var age = $('#age').val(); 
 
\t var email = $('#email').val(); 
 
\t var address = $('#address').val(); 
 

 
\t var fullDetails = {}; 
 
\t fullDetails.name = name; 
 
\t fullDetails.age = age; 
 
\t fullDetails.email = email; 
 
\t fullDetails.address = address; 
 

 
\t localDb.push(fullDetails); 
 
\t window.localStorage.setItem('key',JSON.stringify(localDb)); 
 
\t window.location.reload(); 
 
}; 
 

 
function getId(e){ 
 
\t var removeID = e.closest('tr').id; 
 
\t //alert(removeID); 
 
\t var dataFiles = JSON.parse(localStorage.getItem('key')); 
 
\t localDb.pop(dataFiles[removeID]); 
 
\t $('#'+removeID).remove(); 
 
\t window.localStorage.setItem('key',JSON.stringify(localDb)); 
 
\t window.location.reload(); 
 

 
};

* { 
 
\t box-sizing:border-box; 
 
\t -webkit-box-sizing:border-box; 
 
\t -ms-box-sizing:border-box; 
 
\t -moz-box-sizing:border-box; 
 
} 
 
.outer-wrapper { 
 
\t float:left; 
 
\t width:100%; 
 
} 
 
.form-area { 
 
\t width:100%; 
 
\t float:left; 
 
\t height:100%; 
 
\t background:#CCC; 
 
\t padding:15px; 
 
} 
 
.data-box { 
 
\t width:100%; 
 
\t float:left; 
 
\t height:100%; 
 
\t margin-top: 6px; 
 
} 
 
input[type='text']{ 
 
\t width:20%; 
 
\t float:left; 
 
\t padding:10px 15px; 
 
\t margin-bottom:15px; 
 
\t margin-right: 15px; 
 
} 
 
input[type='button']{ 
 
\t width:15%; 
 
\t float:left; 
 
\t margin-top: 1px; 
 
\t padding:8px 15px; 
 
\t margin-bottom:15px; 
 
\t background:#F00; 
 
\t border:none; 
 
\t color:#fff; 
 
\t font-size:15px; 
 
\t text-transform:uppercase; 
 
\t cursor:pointer; 
 
} 
 

 
#no-data { 
 
    font-size: 60px; 
 
    margin-top: 15%; 
 
    opacity: 0.5; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
} 
 
table,tbody { 
 
\t width: 100%; 
 
\t float: left; 
 
} 
 

 
tr { 
 
\t width:100%; 
 
\t float:left; 
 
} 
 
th { 
 
\t font-size:18px; 
 
\t color:#000; 
 
\t font-weight:bold; 
 
\t \t \t 
 
} 
 

 
td , th{ 
 
\t width:18.3%; 
 
\t float:left; 
 
\t text-align:center; 
 
\t border:1px solid #000; 
 
\t padding: 15px; 
 
} 
 
td { 
 
\t min-height:55px; 
 
} 
 
td input[type="button"] { 
 
\t padding: 7px 15px; 
 
\t font-size: 12px; 
 
\t margin: 9px 0; 
 
\t width: 100%; 
 
} 
 
td:last-child { 
 
\t padding: 0 15px; 
 
} 
 
.form-area h2 { 
 
    margin: 0; 
 
    padding-bottom: 15px; 
 
    text-align: center; 
 
} 
 
td:first-child ,th:first-child { 
 
\t width: 8%; 
 
} 
 
td:nth-child(2), th:nth-child(2) { 
 
    width: 8%; 
 
} 
 
td:nth-child(3), th:nth-child(3) { 
 
    width: 7%; 
 
} 
 
td:nth-child(5), th:nth-child(5) { 
 
    width: 50%; 
 
} 
 
td:last-child ,th:last-child { 
 
\t width: 8%; 
 
}

<div class="outer-wrapper"> 
 
\t <div class="form-area"> 
 
    \t <h2>Fill your data</h2> 
 
     <input type="text" placeholder="Name" id="name" /> 
 
     <input type="text" placeholder="Age" id="age" /> 
 
     <input type="text" placeholder="Email" id="email" /> 
 
     <input type="text" placeholder="Address" id="address" /> 
 
     <input type="button" value="Submit" id="sumbit" onclick="add();" /> 
 
    </div><!-- /.form-area --> 
 
    <div class="data-box"> 
 
     <h2 id="no-data">No data found here </h2> 
 
    </div><!-- /.data-box --> 
 
</div><!-- /.outer-wrapper -->

Answer 2

試試這個代碼：

var new_row = '<tr>'; 
$('table .tr_clone td').each(function(){ 
    new_row += '<td>'+$(this).find('input').val()+'</td>'; 
}); 
new_row += '</tr>'; 
$('table').append(new_row); 

Answer 3

<--HTML---> 
    <table id="mytable"> 
     <tr> 
     <td>Name</td> 
     <td>Location</td> 
     <td>Date</td> 
     <td>Valid</td> 
     <td>Add</td> 
     </tr> 
     <tr class="tr_clone"> 
     <td> 
      <input type="text" id="tname"> 
     </td> 
     <td> 
      <input type="text" id="tloc"> 
     </td> 
     <td> 
      <input type="text" class="datepicker" id="tdate"> 
     </td> 
     <td> 
      <input type="checkbox" class="datepicker"> 
     </td> 
     <td> 
      <input type="button" name="add" value="Add" id="addbtn"> 
     </td> 
     </tr> 
    </table> 

/**JQUERY**/ 

    $("#addbtn").click(function(){ 

    var name = $("#tname").val(); 
    var loc = $("#tloc").val(); 
    var date = $("#tdate").val(); 

     $('#mytable tr:last').after('<tr><td>'+name+'</td><td>'+loc+'</td><td>'+date+'</td></tr>'); 
    });