table动态列的操作

lgyg2002 2018-09-26 04:04:30

原table

当列2的值改变时，列3的行数相应的减少和增加
如图

请教大侠们，js怎么写，，谢谢啦

...全文

777 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

winzond 2018-09-27

打赏
举报

不过，亲，貌似IE下没法执行

winzond 2018-09-27

打赏
举报

3楼精彩，学习了

lgyg2002 2018-09-27

打赏
举报

当列2的值发生变化是，，应该是其他列的rowspan 值发生变化，新增行和减少行

Mångata.. 2018-09-27

打赏
举报

3楼

Logerlink 2018-09-27

打赏
举报



<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>

		<style>

			tr,th,td {border: 1px solid #333;padding: 10px;}

			td div {border-bottom: 1px solid #333;}

		</style>

		<title></title>

		<script>

			$(function() {

				$('td input').keyup(function() {

					let index = $(this).parents('.original').data('index');

					let num = $(this).val();

					var newTr = $('.new-'+index);

					/*console.log('.new'+index);

					console.log(num);

					console.log(isNaN(num))*/

					if(isNaN(num) || num ==0) return;

					let divStr = '';

					for(let i = 0; i < num-1; i++)

						divStr += `<tr class='new new-${index}'><td>1111_${i}</td></tr>`;

					

					if(newTr !=undefined) newTr.remove();

					$(this).parents('tr').children('td').not($(this).parent('td').next('td')).prop("rowspan",num);

					$(this).parents('tr').after(divStr);

				});

			})

		</script>

	</head>

	<body>

		<table cellspacing="0" cellpadding="0">

			<thead>

				<tr>

					<th>#</th>

					<th>行1</th>

					<th>行---------2</th>

					<th>行---------3</th>

				</tr>

			</thead>

			<tbody>

				<tr class="original" data-index = "0">		<!-- data-index为唯一标识    -->

					<td>1</td>

					<td><input type="text" value="1" /></td>

					<td>

						1111

					</td>

					<td>222</td>

				</tr>

				<tr  class="original" data-index = "1">

					<td>1</td>

					<td><input type="text" value="1" /></td>

					<td>

						1111

					</td>

					<td>222</td>

				</tr>

				<tr  class="original" data-index = "2">

					<td>1</td>

					<td><input type="text" value="1" /></td>

					<td>

						1111

					</td>

					<td>222</td>

				</tr>

			</tbody>

		</table>

	</body>

</html>

Logerlink 2018-09-26

打赏
举报



			$(function(){

				$('td input').keydown(function(){

					let num = $(this).val();

					console.log(num);

					console.log(isNaN(num))

					if(isNaN(num)) return;

					let divStr = '';

					for(let i =0;i<num;i++){

						divStr +=`<div>1111_${i}</div>`;

					}

					$(this).parents('td').next('td').html(divStr);

				});

			})