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(){

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

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