Jquery之Table的点击行编辑

最新推荐文章于 2023-01-27 19:22:56 发布

原创最新推荐文章于 2023-01-27 19:22:56 发布 · 820 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery #html #table #click

Jquery 专栏收录该内容

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化时，绑定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状态处于未编辑状态，逻辑自定义
		 var tdHtml = "<div class=\"自定义样式\">";
		 var val1 = '1'; // 建议拿行唯一值
         tdHtml+= "<input id=\"txtEdit\" type=\"text\" onchange=\"Func ('" + val1+ "')\" value=\"" + val + "\" />";
         tdHtml+= "</div >";
         $(td).html(tdHtml);
   	 }
};

function InitTd(td, val)  { // 初始化td
    if (val || val === '') {
        td.html(val);
    }
};

function Func (val)  { // 更新
	//业务处理后，初始化td
	var td = $("#txtEdit").parents("td");
	InitTd(td,$("#txtEdit").val());
};