javascript - jQuery Copy dynamically added table row values into next row

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>

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.

Answer 1

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