事件中的 this相当于document.getElementById(\”id\”)
替代方法就是将原本
document.getElementById(\"id\").InnerHTML = \"填充代码\";
替换成
$(\"#id\").html(\"填充代码\");
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<title>layui</title>
<meta charset=\"UTF-8\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
<meta content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\" name=\"viewport\">
<link rel=\"stylesheet\" href=\"./layui/css/layui.css\" rel=\"external nofollow\" media=\"all\">
</head>
<body>
<div class=\"form-group col-sm-12\">
<table class=\"layui-hide\" id=\"jqGrid\" lay-filter=\"jqGridFilter\"></table>
<div id=\"jqGridPager\"></div>
</div>
<script src=\"./layui/layui.js\" charset=\"utf-8\"></script>
<script>
layui.use(\'table\', function () {
table = layui.table;
table.render({
elem: \'#jqGrid\'
, cellMinWidth: 80
, totalRow: true
, cols: [[
{type: \'checkbox\', fixed: \'left\'}
, {field: \'id\', title: \'ID\', width: 80, sort: true}
, {field: \'username\', title: \'姓名\', width: 120}
, {field: \'email\', title: \'邮件\', minWidth: 150}
, {field: \'sign\', title: \'签名\', minWidth: 160}
, {field: \'sex\', title: \'性别\', event: \'setSign\',width: 80}
, {field: \'city\', title: \'城市\', width: 100}
, {field: \'experience\', title: \'积分\', width: 80, sort: true}
]]
, data: [{
\"id\": \"10001\"
, \"username\": \"你好\"
, \"email\": \"xianxin@layui.com\"
, \"sex\": \"男\"
, \"city\": \"西安\"
, \"sign\": \"人生恰似一场修行\"
, \"experience\": \"116\"
, \"ip\": \"192.168.0.8\"
, \"logins\": \"108\"
, \"joinTime\": \"2016-10-14\"
}, {
\"id\": \"10002\"
, \"username\": \"你好\"
, \"email\": \"xianxin@layui.com\"
, \"sex\": \"男\"
, \"city\": \"西安\"
, \"sign\": \"人生恰似一场修行\"
, \"experience\": \"116\"
, \"ip\": \"192.168.0.8\"
, \"logins\": \"108\"
, \"joinTime\": \"2016-10-14\"
}, {
\"id\": \"10003\"
, \"username\": \"你好\"
, \"email\": \"xianxin@layui.com\"
, \"sex\": \"男\"
, \"city\": \"西安\"
, \"sign\": \"人生恰似一场修行\"
, \"experience\": \"116\"
, \"ip\": \"192.168.0.8\"
, \"logins\": \"108\"
, \"joinTime\": \"2016-10-14\"
}, {
\"id\": \"10004\"
, \"username\": \"你好\"
, \"email\": \"xianxin@layui.com\"
, \"sex\": \"男\"
, \"city\": \"西安\"
, \"sign\": \"人生恰似一场修行\"
, \"experience\": \"116\"
, \"ip\": \"192.168.0.8\"
, \"logins\": \"108\"
, \"joinTime\": \"2016-10-14\"
}, {
\"id\": \"10005\"
, \"username\": \"你好\"
, \"email\": \"xianxin@layui.com\"
, \"sex\": \"男\"
, \"city\": \"西安\"
, \"sign\": \"人生恰似一场修行\"
, \"experience\": \"116\"
, \"ip\": \"192.168.0.8\"
, \"logins\": \"108\"
, \"joinTime\": \"2016-10-14\"
}, {
\"id\": \"10006\"
, \"username\": \"你好\"
, \"email\": \"xianxin@layui.com\"
, \"sex\": \"男\"
, \"city\": \"西安\"
, \"sign\": \"人生恰似一场修行\"
, \"experience\": \"116\"
, \"ip\": \"192.168.0.8\"
, \"logins\": \"108\"
, \"joinTime\": \"2016-10-14\"
}, {
\"id\": \"10007\"
, \"username\": \"你好\"
, \"email\": \"xianxin@layui.com\"
, \"sex\": \"男\"
, \"city\": \"西安\"
, \"sign\": \"人生恰似一场修行\"
, \"experience\": \"116\"
, \"ip\": \"192.168.0.8\"
, \"logins\": \"108\"
, \"joinTime\": \"2016-10-14\"
}, {
\"id\": \"10008\"
, \"username\": \"你好\"
, \"email\": \"xianxin@layui.com\"
, \"sex\": \"男\"
, \"city\": \"西安\"
, \"sign\": \"人生恰似一场修行\"
, \"experience\": \"116\"
, \"ip\": \"192.168.0.8\"
, \"logins\": \"108\"
, \"joinTime\": \"2016-10-14\"
}]
, page: true
, limits: [10, 30, 50, 100],
response: {
statusName: \'code\'
, statusCode: 0
, msgName: \'msg\'
, countName: \'layuiCount\'
, dataName: \'layuiData\'
}
, done: function (res, page, count) {
}
});
//排序重新加载
table.on(\'sort(jqGridFilter)\', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter=\"对应的值\"
vm.layerUiSortObj = obj;
});
//监听复选框事件
table.on(\'checkbox(jqGridFilter)\', function (obj) {
//选中改变颜色
if (obj.checked == true) {
obj.tr.css(\'background-color\', \'#8FBC8F\');
} else {
//取消选中恢复白色
obj.tr.css(\'background-color\', \'white\');
}
});
//监听单元格事件
table.on(\'tool(jqGridFilter)\', function(obj){
var data = obj.data;
if(obj.event === \'setSign\'){
//this.innerHTML=\'<div id=\"aa\">这是内容</div>\';
this.className+=data.sign;
this.style.background = \"red\";
};
});
});
</script>
</body>
</html>
以上这篇layui table单元格事件修改值的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容