jQuery全局点击事件的使用

开发工具与关键技术：MVC、C#、Layui,jQuery
作者：张俊辉
撰写时间：2019年05月06日

本文献在需要删除表格内的标签而写的实现效果是点击表格内的单元格新增当前单元格的标签,删除前单元格内标签并回填数据,而点击表格以外的元素则删除表格内的标签,不新增标签,实现代码如下:

//表头列索引对象
    var tableName = {};
    //表头单元格
    var tableTh = $("#InsertPurchaseMC thead tr th");
    //循环表头获取name值并赋值以key为表头的name值索引为i
    for (var i = 0; i < tableTh.length; i++) {
         tableName[tableTh.eq(i).attr("name")] = i;
    }
//页面所有元素点击事件
     $(document).on('click', function (e) {
		//当点击的元素为表体以外时
		if ($(e.target).closest("tbody").length == 0) {
			if ($("#InsertPurchaseMC tbody tr").length != 0) {
				var MCtr = $("#InsertPurchaseMC tbody tr");
				Delete(e.target, tableName, MCtr);
			}
		}
	 });
	 //清除表格单元格内的标签并回填数据
     function Delete(T, Name, TaxPoint, AmountPayable, MCtr) {
		var Bool = true;
		//循环当前点击的元素中包含的类
		for (var i = 0; i < $(T).context.classList.length; i++) {
			//如果当前点击的元素有layui-table-edit类时则不执行下列代码
			if ($(T).context.classList[i] == "layui-table-edit") {
				Bool = false;
				break;
			}
		}
		if (Bool) {
			//如果当前点击的td单元格在行内的索引不等于表格内input或select标签的父级td单元格的索引时||当前点击的td单元格的行索引不等于表格内input或select标签的父级tr索引时||当前点击的td标签为表头时
			//，删除input或select标签并赋值给相应的单元格
			if ($(".layui-table-edit").parent().index() != $(T).index() || $(".layui-table-edit").parent().parent().index() != $(T).parent().index() || $(T).closest("thead").length == 1) {
				//如果.layui-table-edit类所对应的标签name值不为null或undefined时（即.layui-table-edit类所对应的标签为select时）
				if (Name[$(".layui-table-edit").attr("name")] != null || Name[$(".layui-table-edit").attr("name")] != undefined) {
					//如果下拉框选中的值为——请选择
					if ($(".layui-table-edit option:selected").text() == "请选择") {
						//那么就把它的父级元素赋值为"";
						$(".layui-table-edit").parent().parent().find("td").eq(Name[$(".layui-table-edit").attr("name")]).text($(".layui-table-edit option:selected").val())
						$(".layui-table-edit").parent().text("")
					} else {
						//找到该select标签所在行的所有单元格以select的name值找到表头th对应的该行单元格并赋值
						$(".layui-table-edit").parent().parent().find("td").eq(Name[$(".layui-table-edit").attr("name")]).text($(".layui-table-edit option:selected").val())
						//否则它的父级元素赋值为选中值
						$(".layui-table-edit").parent().text($(".layui-table-edit option:selected").text())
					}
					//删除select标签
					$(".layui-table-edit").remove();
				} else {
					//把当前input标签的值赋值给它的父级单元格
					$(".layui-table-edit").parent().text($(".layui-table-edit").val());
					//删除input标签
					$(".layui-table-edit").remove();
				}
			}
		}
	}
	 //多选框点击
	function RowClick(T) {
		$(T).toggleClass("layui-form-checked");
	}
  //新增采购单新增采购明细
  function InsPurchaseMC() {
		var tr = '<tr>'
		for (var i = 0; i < tableTh.length; i++) {
			if (i == 0) {
				tr += '<td><div class="layui-unselect layui-form-checkbox" lay-skin="primary" οnclick="RowClick(this)"><i class="layui-icon">&#xe605</i></div></td>'
			}
			else if (tableTh.eq(i).css("display") == "none") {
				tr += "<td style='display:none'></td>"
			} else {
				tr += "<td></td>"
			}
		}
		tr += "</tr>";
		//添加行
		$("#InsertPurchaseMC tbody").append(tr);
		//表格行
		var tableTr = $("#InsertPurchaseMC tbody tr");
		for (var i = 0; i < tableTr.length; i++) {
			//声明表体单元格点击事件s
			tableTr.eq(i).find("td").click(function () {
						Delete(this, tableName, tableTr);
						if ($(this).find(".layui-table-edit").length == 0) {
							var Text = $(this).text();
							$(this).html(Text + "<input class='layui-input layui-table-edit' value=" + Text + ">");
							$(this).find(".layui-table-edit").focus();
						}
			});
		}
	}

效果图如下:
编辑前:

编辑后: