鼠标点击选择行再次点击取消选择行

最新推荐文章于 2020-05-20 11:47:21 发布

xiaodanjava

最新推荐文章于 2020-05-20 11:47:21 发布

阅读量4.4k

点赞数 1

http://www.55118885.com/w/642095264.html

jQuery中点击TR实现checkbox选中/取消

日期：2016-05-24 阅读：1num

我们在很多软件中可以看到点击表格行就可以实现快速的选择中所表格行的tr中的checkbox，下面我来介绍段实现程序。

Jquery中用到的方法:

first()：第一个元素;

nextAll():在XX之后的所有元素:主要为了把第一行的表头去掉

children():查找子元素;

toggleClass();切换样式

attr()：给CheckBox添加checked属性;

例1

代码如下

复制代码

$(function () {
//除了表头（第一行）以外所有的行添加click事件.
$("tr").first().nextAll().click(function () {
//为点击的这一行切换样式bgRed里的代码：background-color:#FF0000;
$(this).children().toggleClass("bgRed");
//判断td标记的背景颜色和body的背景颜色是否相同;
if ($(this).children().css("background-color") != $(document.body).css("background-color")) {
//如果相同，CheckBox.checked=true;
$(this).children().first().children().attr("checked", true);

} else {
//如果不同,CheckBox.checked=false;
$(this).children().first().children().attr("checked", false);
}
});
});

http://m.jb51.net/article/68862.htm

JavaScript获取表格（table）当前行的值、删除行、增加行

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Js获取 table当前行的值</title>
<script language=javascript>
	var selectedTr = null;
	function c1(obj) {
		obj.style.backgroundColor = 'blue'; //把点到的那一行变希望的颜色; 
		if (selectedTr != null)
			selectedTr.style.removeAttribute("backgroundColor");
		if (selectedTr == obj)
			selectedTr = null;//加上此句，以控制点击变白，再点击反灰 
		else
			selectedTr = obj;
	}
	/*得到选中行的第一列的值*/
	function check() {
		if (selectedTr != null) {
			var str = selectedTr.cells[0].childNodes[0].value;
			document.getElementById("lab").innerHTML = str;
		} else {
			alert("请选择一行");
		}
	}
	/*删除选中行*/
	function del() {
		if (selectedTr != null) {
			if (confirm("确定要删除吗?")) {
				alert(selectedTr.cells[0].childNodes[0].value);
				var tbody = selectedTr.parentNode;
				tbody.removeChild(selectedTr);
			}
		} else {
			alert("请选择一行");
		}
	}
</script>
</head>
<body>
	单击选中Tr，高亮显示，再单击取消选选中。
	<input type=button value="选中的是哪一行？" οnclick="check()">
	<input type=button value="删除选中行" οnclick="del()">
	<input type=button value="增加一行" οnclick="add()">
	<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
		<tr οnclick="c1(this);" bgcolor="#cccccc">
			<td><input type="text" value="11"></td>
			<td><input type="text" value="12"></td>
		</tr>
		<tr οnclick="c1(this);" bgcolor="#e0e0e0">
			<td><input type="text" value="21"></td>
			<td><input type="text" value="22"></td>
		</tr>
		<tr οnclick="c1(this);" bgcolor="#cccccc">
			<td><input type="text" value="31"></td>
			<td><input type="text" value="32"></td>
		</tr>
		<tr οnclick="c1(this);" bgcolor="#e0e0e0">
			<td><input type="text" value="41"></td>
			<td><input type="text" value="42"></td>
		</tr>
		<tr οnclick="c1(this);" bgcolor="#cccccc">
			<td><input type="text" value="51"></td>
			<td><input type="text" value="52"></td>
		</tr>
	</table>
	<label id="lab"></label>
</body>
</html>

http://fiddle.jshell.net/cecepthea/npud61ay/

$("#table2 tbody td").click(function ()
{
  $(this).closest('table').find('td').not(this).removeClass('selected');  
  $(this).toggleClass('selected');
});

.selected {
    background-color: rgba(0,0,0,0.4) !important;
    color: #fff;
}

https://datatables.net/examples/api/select_single_row.html

http://blog.csdn.net/hurryjiang/article/details/6910331

xiaodanjava

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
鼠标点击选择行再次点击取消选择行

http://www.55118885.com/w/642095264.htmljQuery中点击TR实现checkbox选中/取消日期：2016-05-24 阅读：1numAdvertisement我们在很多软件中可以看到点击表格行就可以实现快速的选择中所表格行的tr中的checkbox，下面我来介绍段实现程序。Jquery中用到的方法:
复制链接

扫一扫