jQuery Copy将表格行值动态添加到下一行

本文介绍了jQuery Copy将表格行值动态添加到下一行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 <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>

我只需要将表格行中的值（不包括输入字段）插入下一行在表格中。

I need to insert only the values from the table row (not include the input filed) into next row in the table.

请给出您宝贵的建议。

Please give your valuable suggestions.

推荐答案

我会给你一些信息给你。

i'll give you something for your information

var localDb = []; var emptyVar = ''; (function(){ //define local storage var dataFiles = JSON.parse(localStorage.getItem('key')); console.log(dataFiles); if (dataFiles == null){ $('#no-data').show(); //alert('its working'); }else{ $('#no-data').hide(); $('.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>'); for (var i=0; i<dataFiles.length; i++){ localDb.push(dataFiles[i]); emptyVar += '<tr id="number'+i+'">'; emptyVar += '<td>'+i+'</td>'; emptyVar += '<td>'+dataFiles[i].name+'</td>'; emptyVar += '<td>'+dataFiles[i].age+'</td>'; emptyVar += '<td>'+dataFiles[i].email+'</td>'; emptyVar += '<td>'+dataFiles[i].address+'</td>'; emptyVar += '<td>'+'<input type="button" value="Remove" onclick="getId(this);" />'+'</td>'; emptyVar += '</tr>' }; $('#uploadFiles').html(emptyVar); }; })(); function add(){ var name = $('#name').val(); var age = $('#age').val(); var email = $('#email').val(); var address = $('#address').val(); var fullDetails = {}; fullDetails.name = name; fullDetails.age = age; fullDetails.email = email; fullDetails.address = address; localDb.push(fullDetails); window.localStorage.setItem('key',JSON.stringify(localDb)); window.location.reload(); }; function getId(e){ var removeID = e.closest('tr').id; //alert(removeID); var dataFiles = JSON.parse(localStorage.getItem('key')); localDb.pop(dataFiles[removeID]); $('#'+removeID).remove(); window.localStorage.setItem('key',JSON.stringify(localDb)); window.location.reload(); };

* { box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; } .outer-wrapper { float:left; width:100%; } .form-area { width:100%; float:left; height:100%; background:#CCC; padding:15px; } .data-box { width:100%; float:left; height:100%; margin-top: 6px; } input[type='text']{ width:20%; float:left; padding:10px 15px; margin-bottom:15px; margin-right: 15px; } input[type='button']{ width:15%; float:left; margin-top: 1px; padding:8px 15px; margin-bottom:15px; background:#F00; border:none; color:#fff; font-size:15px; text-transform:uppercase; cursor:pointer; } #no-data { font-size: 60px; margin-top: 15%; opacity: 0.5; text-align: center; text-transform: uppercase; } table,tbody { width: 100%; float: left; } tr { width:100%; float:left; } th { font-size:18px; color:#000; font-weight:bold; } td , th{ width:18.3%; float:left; text-align:center; border:1px solid #000; padding: 15px; } td { min-height:55px; } td input[type="button"] { padding: 7px 15px; font-size: 12px; margin: 9px 0; width: 100%; } td:last-child { padding: 0 15px; } .form-area h2 { margin: 0; padding-bottom: 15px; text-align: center; } td:first-child ,th:first-child { 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 { width: 8%; }

<div class="outer-wrapper"> <div class="form-area"> <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 -->