jQuery Dynamisch hinzugefügte Tabellenzeilenwerte in nächste Zeile kopieren

Question

Ich muss nur die Werte aus der Tabellenzeile (nicht das Eingabefeld) in die nächste Zeile in der Tabelle einfügen.

Bitte geben Sie Ihre wertvollen Vorschläge.

Answer 1

ich Ihnen etwas zu Ihrer Information geben werde

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

Versuchen Sie diesen Code:

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>'); 
    });