如何在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
                    }

猜你喜欢

转载自blog.csdn.net/weixin_42206447/article/details/80310350