全选反选加编辑功能

最新推荐文章于 2021-11-05 17:27:57 发布
M_SSY
最新推荐文章于 2021-11-05 17:27:57 发布
阅读量154
点赞数 1
分类专栏： jQuery 文章标签： jQuery
本文链接：https://blog.csdn.net/M_SSY/article/details/80492082
版权
jQuery 专栏收录该内容
32 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title>全选反选编辑框</title>
		<style>
			.edit-mode {
				background-color: #b3b3b3;
				padding: 8px;
				text-decoration: none;
				color: white;
			}
			
			.editing {
				background-color: #f0ad4e;
			}
		</style>
	</head>
	<body>
		<div style="padding: 20px">
			<input type="button" οnclick="CheckAll('#edit_mode', '#tb1');" value="全选" />
			<input type="button" οnclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />
			<input type="button" οnclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />
			<a id="edit_mode" class="edit-mode" href="javascript:void(0);" οnclick="EditMode(this, '#tb1');">进入编辑模式</a>
		</div>
		<table border="1">
			<thead>
				<tr>
					<th>选择</th>
					<th>主机名</th>
					<th>端口</th>
					<th>状态</th>
				</tr>
			</thead>
			<tbody id="tb1">
				<tr>
					<td><input type="checkbox" /></td>
					<td edit="true">v1</td>
					<td>v11</td>
					<td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td edit="true">v1</td>
					<td>v11</td>
					<td edit="true" edit-type="select" sel-val="2" global-key="STATUS">下线</td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td edit="true">v1</td>
					<td>v11</td>
					<td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
	/* 监听是否已经按下control键*/
	window.globalCtrlKeyPress = false;

	window.onkeydown = function(event) {
		if(event && event.keyCode == 17) {
			window.globalCtrlKeyPress = true;
		}
	};
	window.onkeyup = function(event) {
		if(event && event.keyCode == 17) {
			window.globalCtrlKeyPress = false;
		}
	};

	/*
	 按下Control，联动表格中正在编辑的select
	 */
	function MultiSelect(ths) {
		if(window.globalCtrlKeyPress) {
			var index = $(ths).parent().index();
			var value = $(ths).val();
			$(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function() {
				$(this).parent().parent().children().eq(index).children().val(value);
			});
		}
	}
</script>
<script type="text/javascript">
	$(function() {
		BindSingleCheck('#edit_mode', '#tb1');
	});

	function BindSingleCheck(mode, tb) {

		$(tb).find(':checkbox').bind('click', function() {
			var $tr = $(this).parent().parent();
			if($(mode).hasClass('editing')) {
				if($(this).prop('checked')) {
					RowIntoEdit($tr);
				} else {
					RowOutEdit($tr);
				}
			}
		});
	}

	function CreateSelect(attrs, csses, option_dict, item_key, item_value, current_val) {
		var sel = document.createElement('select');
		$.each(attrs, function(k, v) {
			$(sel).attr(k, v);
		});
		$.each(csses, function(k, v) {
			$(sel).css(k, v);
		});
		$.each(option_dict, function(k, v) {
			var opt1 = document.createElement('option');
			var sel_text = v[item_value];
			var sel_value = v[item_key];

			if(sel_value == current_val) {
				$(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected', true).appendTo($(sel));
			} else {
				$(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));
			}
		});
		return sel;
	}

	STATUS = [{
			'id': 1,
			'value': "在线"
		},
		{
			'id': 2,
			'value': "下线"
		}
	];

	BUSINESS = [{
			'id': 1,
			'value': "车上会"
		},
		{
			'id': 2,
			'value': "二手车"
		}
	];

	function RowIntoEdit($tr) {
		$tr.children().each(function() {
			if($(this).attr('edit') == "true") {
				if($(this).attr('edit-type') == "select") {
					var select_val = $(this).attr('sel-val');
					var global_key = $(this).attr('global-key');
					var selelct_tag = CreateSelect({
						"onchange": "MultiSelect(this);"
					}, {}, window[global_key], 'id', 'value', select_val);
					$(this).html(selelct_tag);
				} else {
					var orgin_value = $(this).text();
					var temp = "<input value='" + orgin_value + "' />";
					$(this).html(temp);
				}

			}
		});
	}

	function RowOutEdit($tr) {
		$tr.children().each(function() {
			if($(this).attr('edit') == "true") {
				if($(this).attr('edit-type') == "select") {
					var new_val = $(this).children(':first').val();
					var new_text = $(this).children(':first').find("option[value='" + new_val + "']").text();
					$(this).attr('sel-val', new_val);
					$(this).text(new_text);
				} else {
					var orgin_value = $(this).children().first().val();
					$(this).text(orgin_value);
				}

			}
		});
	}

	function CheckAll(mode, tb) {
		if($(mode).hasClass('editing')) {

			$(tb).children().each(function() {

				var tr = $(this);
				var check_box = tr.children().first().find(':checkbox');
				if(check_box.prop('checked')) {

				} else {
					check_box.prop('checked', true);

					RowIntoEdit(tr);
				}
			});

		} else {

			$(tb).find(':checkbox').prop('checked', true);
		}
	}

	function CheckReverse(mode, tb) {

		if($(mode).hasClass('editing')) {

			$(tb).children().each(function() {
				var tr = $(this);
				var check_box = tr.children().first().find(':checkbox');
				if(check_box.prop('checked')) {
					check_box.prop('checked', false);
					RowOutEdit(tr);
				} else {
					check_box.prop('checked', true);
					RowIntoEdit(tr);
				}
			});

		} else {

			$(tb).children().each(function() {
				var tr = $(this);
				var check_box = tr.children().first().find(':checkbox');
				if(check_box.prop('checked')) {
					check_box.prop('checked', false);
				} else {
					check_box.prop('checked', true);
				}
			});
		}
	}

	function CheckCancel(mode, tb) {
		if($(mode).hasClass('editing')) {
			$(tb).children().each(function() {
				var tr = $(this);
				var check_box = tr.children().first().find(':checkbox');
				if(check_box.prop('checked')) {
					check_box.prop('checked', false);
					RowOutEdit(tr);

				} else {

				}
			});

		} else {
			$(tb).find(':checkbox').prop('checked', false);
		}
	}

	function EditMode(ths, tb) {
		if($(ths).hasClass('editing')) {
			$(ths).removeClass('editing');
			$(tb).children().each(function() {
				var tr = $(this);
				var check_box = tr.children().first().find(':checkbox');
				if(check_box.prop('checked')) {
					RowOutEdit(tr);
				} else {

				}
			});

		} else {

			$(ths).addClass('editing');
			$(tb).children().each(function() {
				var tr = $(this);
				var check_box = tr.children().first().find(':checkbox');
				if(check_box.prop('checked')) {
					RowIntoEdit(tr);
				} else {

				}
			});

		}
	}
</script>