如何在js添加table tr td标签 并找到所对应的id进行追加,并设置样式

{
                        var InCommentID = Array[i].InCommentID;
                        var WechatPic = Array[i].WechatPic;
                        var ClientName = Array[i].ClientName;
                        var Comment = Array[i].Comment;
                        var ComentDate = Array[i].ComentDate;
                        var Image = Array[i].Image;
                        var OrderTime = Array[i].OrderTime;
                        var Grade = Array[i].Grade;
                        if (InCommentIDisTrue != InCommentID) {
                            //创建table标签
                            oneRow = table.insertRow();  //插入一行  
                            cell1 = oneRow.insertCell(); //需要插入单元格
                            cell2 = oneRow.insertCell();
                            cell3 = oneRow.insertCell();
                            
                            oneRow2 = table.insertRow(); //插入一行
                            cell11 = oneRow2.insertCell(); //需要插入单元格
                            cell12 = oneRow2.insertCell();
                            cell13 = oneRow2.insertCell();

                            if (Image != "") {
                                RowImages = table.insertRow(); //插入一行用于图片的加载
                                CellImages = RowImages.insertCell();
                            }
                            
                            oneRow3 = table.insertRow(); //插入一行
                            cel1 = oneRow3.insertCell(); //需要插入单元格
                            cel2 = oneRow3.insertCell();
                            cel3 = oneRow3.insertCell();
                            
                            //第一个行开始
                            //第一个单元格设置样式
                            cell1.style.width = "50%"
                            cell2.style.width = "30%"
                            cell1.style.color = "#FF0000";
                            //第一个单元格里添加div
                            var div = document.createElement("div");
                            //设置DIV的id
                            div.setAttribute("id", "ddd");
                            //将div添加到第一个单元格
                            cell1.appendChild(div);
                            //设置div的内容
                            div.innerHTML = '<img src="' + WechatPic + '" style="width: 30px; height: 30px;" />';
                            var divv = document.createElement("div");
                            divv.setAttribute("id", "dd");
                            cell1.appendChild(divv);
                            divv.innerHTML = '' + ClientName + '';
                            cell2.innerHTML = "";
                            cell3.innerHTML = '' + ComentDate + '';
                            //第一个行结束

                            //第二个行开始
                            //第一个单元格里添加div
                            var divPL = document.createElement("div");
                            //设置DIV的id
                            divPL.setAttribute("id", "PL");
                            //将div添加到第一个单元格
                            cell11.appendChild(divPL);
                            //设置td跨行的属性
                            cell11.setAttribute("colspan", "3");
                            divPL.innerHTML = '' + Comment + '';
                            cell12.innerHTML = "";
                            cell13.innerHTML = "";
                            //第二个行结束

                            //第三个行开始
                            //colspan = "3";
                            //cell.setAttribute("id", "td2");
                            //第一个单元格里添加div
                            var divPLL = document.createElement("div");
                            //设置DIV的id
                            divPLL.setAttribute("id", "PLL");
                            //将div添加到第一个单元格
                            cel1.appendChild(divPLL);
                            divPLL.innerHTML = "购买日期:" + OrderTime + "";
                            cel2.innerHTML = "";
                            cel3.innerHTML = "";
                            //第三个行结束
                            
                            if (Image != "") {
                                //显示图片的td的id
                                if (InCommentID != InCommentIDisTrue) {
                                    CellImages.id = "Image" + InCommentID + "";
                                    //第一个单元格里添加div
                                    var divImage = document.createElement("div");
                                    //设置DIV的id
                                    divImage.setAttribute("id", "divImage");
                                    //设置div的类名
                                    divImage.setAttribute("class", "ClassImage")
                                    //将div添加到第一个单元格
                                    CellImages.appendChild(divImage);
                                    //设置div的内容
                                    divImage.innerHTML = '<img src="' + WechatPic + '" style="width: 30px; height: 30px;" />';

                                }
                            }
                        }
                        else {
                            if (InCommentID == InCommentIDisTrue) {
                                //创建div
                                var divImages = document.createElement("div");
                                //设置div的类名
                                divImages.setAttribute("class", "ClassImage")
                                //找到tr的id
                                var divA = document.getElementById("Image" + InCommentID + "");
                                //追加到相同主键的图片显示区域
                                divA.appendChild(divImages)
                                //显示内容
                                divImages.innerHTML = '<img src="' + WechatPic + '" style="width: 30px; height: 30px;" />';
                            }
                        }

                        //用于比较主键是否一样
                        InCommentIDisTrue = InCommentID
                    }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 layui 表格中,可以使用 table.render() 方法来渲染表格,同时也可以在该方法中指定表格每一行(tr)的 id。具体实现步骤如下: 1. 在 html 中创建一个表格,并为每一行(tr)指定一个唯一的 id,如下所示: ```html <table id="demo" lay-filter="test"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> </thead> <tbody> <tr id="1"> <td>张三</td> <td>18</td> <td>北京</td> </tr> <tr id="2"> <td>李四</td> <td>20</td> <td>上海</td> </tr> <tr id="3"> <td>王五</td> <td>22</td> <td>广州</td> </tr> </tbody> </table> ``` 2. 在 js 中使用 table.render() 方法来渲染表格,并为每一行(tr)指定 id,示例如下: ```javascript //渲染表格 table.render({ elem: '#demo', url: '/demo/table/user/', cols: [[ {field:'username', title: '姓名'}, {field:'age', title: '年龄'}, {field:'city', title: '城市'} ]], //指定每一行(tr)的 id id: 'testTable', //每一行(tr)渲染完成后的回调函数 done: function(res, curr, count){ //遍历每一行(tr) $('tbody tr').each(function(index, item){ //获取该行的数据 var row = res.data[index]; //为该行(tr)指定 id $(item).attr('id', row.id); }); } }); ``` 在上面的示例中,我们使用了 table.render() 方法来渲染表格,并且为每一行(tr)指定了 id。同时,我们在 done 回调函数中遍历每一行(tr),并为其指定了对应id。这样,在后续操作中,我们就可以通过指定 id 来获取对应的行数据了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值