Layui 行点击追加元素效果

最新推荐文章于 2024-05-07 15:27:01 发布

weixin_30279671

最新推荐文章于 2024-05-07 15:27:01 发布

阅读量435

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lixinzhen/p/10494417.html

本文介绍了一个基于JavaScript的表格行点击事件处理方法，详细解释了如何在点击表格行时显示特定数据，并通过动态生成HTML来展示化验详情及图片预览。此功能涉及到DOM操作、事件监听和数据绑定等技术。

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

/**
 * 单击事件
 * @param obj
 */
var dom;
var state;
WarningIllegalIntime.onRowClick=function(obj) {
    console.log(obj.data.id,"6666666")
    var data = obj.data;
    console.log(data.id);
    if (state != 1) {
        if(state==0){
            if(dom==null){//state 0
                bbb(obj);
                state=1;
            }else{//state 0
                bbb(obj)
                state=1;
            }
        }else{
            bbb(obj);
            state=1;
        }
    }else{//state 1 打开状态
        if(dom!=null){
            if(data.id==dom){
                var ids = document.getElementById(dom);
                ids.remove();
                state = 0;
            }else if(data.id==null){
                var ids = document.getElementById(dom);
                ids.remove();
                state = 0;
            }else{
                var ids = document.getElementById(dom);
                ids.remove();
                bbb(obj);
                state = 1;
            }
        }else{
            bbb(obj);
            state = 1;
        }
    }
}

function bbb(obj){
    var assayName=[];
    var standardValue=[];
    var assayValue=[];
    var value=obj.data.assayDetailList;
    for(var i=0;i<value.length;i++){
        assayName[i]=value[i].assayName;
        standardValue[i]=value[i].standardValue;
        assayValue[i]=value[i].assayValue;
    }
    var data = obj.data;
    var html = "<tr id=" + data.id + "><td colspan='18' align='center' valign='middle'>"
    html+="<table>"
    html+="<tr><td>指标项</td>"
    for(a in assayName){
        html+="<td style='width: 90px;text-align: center' >"+assayName[a]+"</td>"
    }
    html+="</tr>"
    html+="<tr><td>标准值</td>"
    for(b in standardValue){
        html+="<td style='width: 90px;text-align: center'>"+standardValue[b]+"</td>"
    }
    html+="</tr>"
    html+="<tr><td>化验值</td>"
    for(c in assayValue){
        html+="<td style='width: 90px;text-align: center'>"+assayValue[c]+"</td>"
    }
    html+="</tr>"
    html+="</table>"
    html+="<table><tr>"
    html+='<td data-role="fieldcontain"><a class="aaa" id="zoom8" style="max-width:200px;display: block" href='+data.storageInImg.roughFront+' data-gallery=""><img onclick="ab(this)" class="img-thumbnail" src="'+data.storageInImg.roughFront+'" style="max-width:200px;height: 120px;"></a></td>'
    html+='<td data-role="fieldcontain"><a class="aaa" id="zoom9" style="max-width:200px;display: block" href='+data.storageInImg.roughBack+' data-gallery=""><img onclick="ab(this)" class="img-thumbnail" src='+data.storageInImg.roughBack+' style="max-width:200px;height: 120px;"></a></td>'
    html+='<td data-role="fieldcontain"><a class="aaa" id="zoom10" style="max-width:200px;display: block" href='+data.storageInImg.tareFront+' data-gallery=""><img onclick="ab(this)" class="img-thumbnail" src='+data.storageInImg.tareFront+' style="max-width:200px;height: 120px;"></a></td>'
    html+='<td data-role="fieldcontain"><a class="aaa" id="zoom11"  style="max-width:200px;display: block" href='+data.storageInImg.tareBack+' data-gallery=""><img onclick="ab(this)" class="img-thumbnail" src='+data.storageInImg.tareBack+' style="max-width:200px;height: 120px;"></a></td>'
    html+='<td data-role="fieldcontain"><a class="aaa" id="zoom12" style="max-width:200px;display: block" href='+data.storageInImg.settlementPic+' data-gallery=""><img onclick="ab(this)" class="img-thumbnail" src='+data.storageInImg.settlementPic+' style="max-width:200px;height: 120px;"></a></td></tr><table>'
    html+="</td></tr>"
    dom =data.id;
    obj.tr.after(html)
}