【js】js实现自定义表格行点击事件

1.获取后台data数据

2.前端创建表格并填充数据

a.html页面预留table：

            <div class="blue-title mt">
                <span class="fl">详细地址</span>
            </div>
			<div class="fr btn_addBox">
				<button class="btn1 green-button btn_add_address">新增</button>
			</div>

            <table id="address" class="tableStyle table table-hover"></table>

b.创建表格：

 function makeTableWithclick(id, keys, data, titles) {
        
    	$("#" + id).html("");
        if (titles) {
            $("#" + id).append($("<thead>").append(createTableTitle(titles)));
        }
        for (var i in data) {
            var tr = $("<tr>");
            var item = data[i];
            for (var index in keys) {
                var key = keys[index];
                var htm = eval('item.' + key);
                if (htm == undefined) {
                    htm = '';
                }
                var title = eval('item.' + key);
                if (title == undefined) {
                    title = '';
                }
                var title = escapeHtml(title);
                if (htm && htm.length > length) {
                    htm = htm.substr(0, length) + "...";
                }
                htm = "<span title='" + title + "'>" + htm + "</span>";
                tr.append($("<td>").addClass(key).html(htm));
            }
            $("#" + id).append(tr);
        }
        $("#" + id).addClass("table-bordered");
        $("#" + id).addClass("word_nowrap");
    	
    }


//创建表格标题
function createTableTitle(titles) {
    var trObj = $("<tr>").addClass("tableTh");
    for (var i = 0; i < titles.length; i++) {
        var thObj = $("<th>")
        thObj.html(titles[i])
        thObj.css("text-align", "left")
        thObj.css("padding-left", "40px")
        thObj.css("min-width", "100px")
        thObj.css("background-color", "#DAE2F2")
        trObj.append(thObj)
    }
	
    return trObj
}

c.填入data数据：

 var titlesAddress = ["详细地址", "邮编", "数据来源", "更新时间", "更新人"]
 var keysAddress = ["insuredaddress", "postcode", "addressource", "updateddate", "updator"];
 makeTable("address", keysAddress, data.list, titlesAddress);

3.给每个数据来源创建点击事件

            $(".INSUREDADDRESS").each(function () {
                var insuredaddress = $(this).find("span").attr("title");
                var addressource = $(this).parent().find(".ADDRESSOURCE").find("span")
				addressource.attr("title");
				console.log(addressource.text())
                if (addressource.text()=='客服' || 14 == addressource) {
                    $(this).addClass("underline_click").unbind('click').click(function () {
                        openDiv("address_edit.html", "edit", edit_address, {
                            addressource: addressource.text(),
                            clientno: $("#clientno").val()
                        });
                    });
                }
            });

4.openDiv：

function openDiv(url, id, callback, param) {
    $.get(url, function (data) {//初始將a.html include div#iframe
        var outDiv = $('<div class="' + id + '" style="z-index: 999998;position: fixed;display: block;top: 0px;background:rgba(0,0,0,.3);width: 100%;height: 100%;"></div>');
        var oldId = id;
        id = id + "div";
        var div = $("<div style='background-color:#f5f5fa;z-index: 999999;border: 1px solid #e4e3fa; '></div>").attr("class", id).html(data).append($("<input>").attr("type", "hidden").attr("id", "id"));
        outDiv.appendTo("body").css({
            position: "fixed",
            display: "block",
            width: '100%',
            height: '100%',
            left: '0px',
            top: '0px'
        });
        div.appendTo("." + oldId).css({
            position: "absolute",
            display: "block",
            left: ($(document.body).outerWidth(true) - $("." + id + " div").width()) / 2,
            top: ($(window).height() - $("." + id + " div").height()) / 2 
        });
        moveDiv(id);
        if (callback) {
            callback(param);
        }
    })
}

截图：