Jquery之Table的点击行编辑

最新推荐文章于 2019-07-25 14:38:44 发布

jack_wz_53

最新推荐文章于 2019-07-25 14:38:44 发布

阅读量766

点赞数

分类专栏： Jquery 文章标签： js jquery html table click

本文链接：https://blog.csdn.net/jack_wz_53/article/details/94436604

版权

这篇博客介绍如何利用JQuery为HTML表格添加点击事件，实现行点击时的数据编辑功能。通过绑定click事件，可以方便地交互和操作表格内容。

摘要由CSDN通过智能技术生成

初始化时，绑定Table的行click事件，代码如下：

$(document).ready(function () { // 页面脚本初始化
	TrClick ();
});
function TrClick () { // 行点击事件
	$("#table的id tbody").on("click", "tr", function (e) {
		//e.target可以拿到当前点击元素对象（如id，className等)
		if (e.target.id == "元素id" || e.target.className !="某样式") {
			//本判断目的是指，如点击的元素是td的编辑框，不就用继续下去了
            return;
        }
        if ($("#txtEdit")) {
     		var td = $("#txtEdit").parents("td");
			InitTd(td,$("#txtEdit").val());
        }
		//当前行对象
		var tr = $(this);
		//行所属下的td数组集合
		var tdArr = tr.find("td");
		EditTd (tdArr);
	}
};

function EditTd (tdArr) { // 编辑行的列
	if (!tdArr) {
		return;
    }
    if ( tdArr.length <=0 ) {
		return;
    } 
	var td = tdArr[0]; 
	var val = $.trim(td.innerText）;
	if(td.className == ‘未编辑样式’) { // 如果：td状态处于未编辑状态，逻辑自定义