js动态创建表格并添加双击事件

最新推荐文章于 2026-06-21 07:56:33 发布

原创最新推荐文章于 2026-06-21 07:56:33 发布 · 1.5k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何利用JavaScript在网页中动态生成表格，并详细讲解如何为表格单元格添加双击事件监听，以便在用户双击时触发特定功能。

body部分：

<table id="tab">
	<thead>
		<tr>
			<th>序号</th>
			<th>姓名</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>

js部分：

$.ajax({
	type: 'post',
    async: false, //同步
    url: '',
    data: JSON.stringify(parms),
    success: function (result) {
    	var obj = eval('(' + result + ')');
        if (obj.length > 1) {
        	var tbody = $('<tbody></tbody>');
            $(obj).each(function (index) {
            	var val = obj[index];
            	//推荐：第一种添加双击事件的方法（直接这一句即可）
            	var tr = $('<tr οndblclick="showDetail(\'' + val.CHK_NUMBER + '\')"></tr>');
            	//第二种方法（还要用下面的addDblclick方法才可）
                var tr = $('<tr name="'+val.id+'"></tr>');
                			/*这里三行注释了的是我试过的三种方法都不行*/
                            //$('.aa').attr('dblclick', showDetail(val.id));
                            //var tr = $('<tr οndblclick="addDblclick(' + val.id +')"></tr>');//这样子写的当然不行啦，格式错误
                            //tr.ondblclick = function () { addDblclick(val.id); }
                var td = '<td>' + val.id + '</td>';
                td += '<td>' + val.name+ '</td>';
                tr.append(td);
                tbody.append(tr);
            });
            $("#list tbody").replaceWith(tbody);
						
			//给每个tr添加双击事件
            addDblclick();
        }
        else {
        	error.html("没有找到匹配的记录.");
            error.show();
        }
    }
});

//获取table下的tbody标签下的每一个tr 里的name属性值
function addDblclick() {
	$("#list tbody tr").each(function(index){
    	$(this).dblclick(function () {
        	showDetail($(this).attr("name"));//双击后执行showDetail()函数
        }); 
    });
}