jQuery Copy将表格行值动态添加到下一行 [英] jQuery Copy dynamically added table row values into next row

问题描述

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

这篇关于jQuery Copy将表格行值动态添加到下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！