复选框一个按钮控制js table添加删除一行

鱼的梦想 2018-08-20 06:54:55

需求：
两个不同的复选框按钮（求和，求平均值），

点击求和在table里添加一个求和的行
再点击求和复选框删除刚添加的那个求和行

...全文

206 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

鱼的梦想 2018-08-21

打赏
举报

有大神么给个例子在线等

Hello World, 2018-08-21

打赏
举报

建议隐藏就好了，免得显示时还要计算一遍

Logerlink 2018-08-21

打赏
举报



<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<!--

        	描述：这一段 请自行更换

        -->

		<script type="text/javascript" src="../../../js/jquery-2.2.4.min.js" ></script>

		<style>

			tr td,

			tr th{width: 50px;height: 50px;border: 1px solid blue;}

		</style>

		<script>

			$(function(){

				let isSelect = false;

				$('.check_btn').change(function(){

					isSelect = !isSelect;

					if(isSelect){

						$('.table-test thead tr').append('<th>求和</th>');

						$('.table-test tbody tr').each((index,item)=>{

							$(item).append('<td></td>');

						})

					}else{

						console.log($('.table-test thead tr').children().eq(-1).text())

						$('.table-test thead tr').children().eq(-1).remove();

						$('.table-test tbody tr').each((index,item)=>{

							$(item).children().eq(-1).remove();

						})

					}

				});

			})

		</script>

	</head>

	<body>

		<input type="checkbox" class="check_btn"/> 求和

		<br />

		<table cellpadding="0" cellspacing="0" class="table-test">

			<thead>

				<tr>

					<th>项</th>

					<th>项</td>

					<th>项</td>

					<th>项</td>

				</tr>

			</thead>

			<tbody>

				<tr>

					<td>1</td>

					<td>2</td>

					<td>3</td>

					<td>4</td>

				</tr>

				<tr>

					<td>2</td>

					<td>2</td>

					<td>3</td>

					<td>4</td>

				</tr>

			</tbody>

		</table>

	</body>

</html>