如何在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
                    }
使用JavaScript在一个table tbody tr的第四个td追加一个<input type="text" name="gxhdz" id="gxhdz">文本框的方法如下: 1. 首先,获取到目标table的tbody元素,可以使用getElementById获取到table元素,再通过querySelector选择tbody元素。使用如下代码获取tbody元素: ```javascript var tbody = document.getElementById("tableSelect").querySelector("tbody"); ``` 2. 创建一个新的tr元素,并添加到tbody中。使用如下代码创建并添加新的tr元素: ```javascript var tr = document.createElement("tr"); tbody.appendChild(tr); ``` 3. 创建一个新的td元素,并添加tr中。使用如下代码创建并添加新的td元素: ```javascript var td = document.createElement("td"); tr.appendChild(td); ``` 4. 在td元素中追加<input type="text" name="gxhdz" id="gxhdz">文本框。使用如下代码添加文本框: ```javascript var input = document.createElement("input"); input.type = "text"; input.name = "gxhdz"; input.id = "gxhdz"; td.appendChild(input); ``` 综上所述,可以使用以上的JavaScript代码在一个table tbody tr的第四个td追加一个<input type="text" name="gxhdz" id="gxhdz">文本框。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [js动态新增、删除table中的trtd、input](https://blog.csdn.net/mameng1988/article/details/79865363)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值