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

问题描述

<tr><td>姓名</td><td>位置</td><td>日期</td><td>有效</td><td>添加</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>

我只需要将表行中的值(不包括输入字段)插入表中的下一行.

请提出您宝贵的建议.

解决方案

我会给你一些东西供你参考

var localDb = [];var emptyVar = '';(功能(){//定义本地存储var dataFiles = JSON.parse(localStorage.getItem('key'));控制台日志(数据文件)；如果(数据文件 == 空){$('#no-data').show();//警报('它的工作');}别的{$('#no-data').hide();$('.data-box').html('<table><tbody><tr><th>序列号</th><th>Name</th><th>Age</th><th>电子邮件</th><th>地址</th><th>选项</th></tr></tbody><tbody id="uploadFiles"></tbody></table>');for (var i=0; i';emptyVar += '<td>'+'<input type="button" value="Remove" onclick="getId(this);"/>'+'</td>';emptyVar += '</tr>'};$('#uploadFiles').html(emptyVar);};})();函数添加(){var name = $('#name').val();var age = $('#age').val();var email = $('#email').val();var address = $('#address').val();var fullDetails = {};fullDetails.name = 名称；fullDetails.age = 年龄；fullDetails.email = 电子邮件；fullDetails.address = 地址；localDb.push(fullDetails);window.localStorage.setItem('key',JSON.stringify(localDb));window.location.reload();};函数 getId(e){var removeID = e.closest('tr').id;//警报(删除ID)；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;}.外包装{向左飘浮;宽度:100%；}.form-area {宽度:100%；向左飘浮;高度:100%；背景:#CCC;填充:15px；}.data-box {宽度:100%；向左飘浮;高度:100%；边距顶部:6px；}输入[类型='文本']{宽度:20%；向左飘浮;填充:10px 15px;底边距:15px；右边距:15px；}输入[类型='按钮']{宽度:15%；向左飘浮;边距顶部:1px；填充:8px 15px;底边距:15px；背景:#F00;边界:无；颜色:#fff;字体大小:15px；文本转换:大写；游标:指针；}#没有数据 {字体大小:60px；保证金最高:15%；不透明度:0.5；文本对齐:居中；文本转换:大写；}表，tbody {宽度:100%；向左飘浮;}tr{宽度:100%；向左飘浮;}第 {字体大小:18px；颜色:#000；字体粗细:粗体；}, th{宽度:18.3%；向左飘浮;文字对齐:居中；边框:1px 实心 #000;填充:15px；}TD{最小高度:55px；}TD输入[类型=按钮"] {填充:7px 15px；字体大小:12px；边距:9px 0；宽度:100%；}TD:最后一个孩子{填充:0 15px；}.form-area h2 {边距:0；填充底部:15px；文本对齐:居中；}TD:第一个孩子，第一个孩子{宽度:8%；}td:nth-child(2), th:nth-child(2) {宽度:8%；}td:nth-child(3), th:nth-child(3) {宽度:7%；}td:nth-child(5), th:nth-child(5) {宽度:50%；}td:last-child ,th:last-child {宽度:8%；} 

<div class="form-area"><h2>填写您的数据</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">这里没有数据</h2></div><!--/.data-box --></div><!--/.outer-wrapper -->

<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将动态添加的表行值复制到下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！