weixin_43809055
海德薇快跑
采纳率80%
2020-06-15 09:09

通过.innerHTML插入到页面的代码中样式未加载

5
        for(let i=1;i<=data.length;i++) {


 str='<div style="height:50px width:100%"><tr align="center" bgcolor="#FFFFFF"><td class="text_cray1" style="border: 2px solid grey"><input type="checkbox" name="selectOne" value="" />'+da[i].id+'</td><td width="108"  class="text_cray1" style="border: 2px solid grey" >'+da[i].name+'</td><td width="108"  class="text_cray1" style="border: 2px solid grey">'+da[i].subtitle+'</td><td width="108" class="text_cray1" style="border: 2px solid grey">'+da[i].prick+'</td><td width="108"  class="text_cray1" style="border: 2px solid grey">'+da[i].stock+'</td><td width="108" class="text_cray1" style="border: 2px solid grey">'+da[i].creat_time+'</td><td width="108"  class="text_cray1" style="border: 2px solid grey" class="SelectShopName" >'+da[i].update_time+'</td><td width="108"  class="text_cray1" style="border: 2px solid grey">'+da[i].categoryName+'<button type="button" class="layui-btn layui-btn-xs layui-btn-warm"  value="" >信息修改</button></td><td width="108"  class="text_cray1" style="border: 2px solid grey"><button type="button" class="layui-btn layui-btn-xs layui-btn-warm"  value="">商品删除</button></td></tr></div>'

                                    document.getElementsByClassName("maingoodsarea")[i].innerHTML=str;

                                 }

如图:

图片说明

图片说明

图片说明

图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

3条回答

  • qq_41046662 易烊千玺的女朋友 10月前

    tr,td 是表格元素,放在table里面,将div改为table即可

    点赞 评论 复制链接分享
  • qq_37049128 菜鸟咸鱼一锅端 10月前

    很多种方法的

    <script>
            window.onload = function(){
                /*
                    节点属性
                        * nodeType
                            * 元素:1
                            * 属性:2
                            * 文本:3
                        * nodeName
                            * 元素:大写标签名
                            * 属性 : 属性名
                            * 文本 : #text
                        * nodeValue
                            * 元素:null
                            * 属性 : 属性值
                            * 文本:文字内容
                    创建:
                        * document.createElement() 创建一个元素节点
                        * document.createTextNode() 创建文本节点(了解)
                        * document.createAttribute() 创建属性节点(几乎不用)
    
                    插入:
                        * parent.appendChild(node):把node插入parent称为它的子节点
                        * ele.setAttributeNode(attrNode) 在指定元素中插入一个属性节点(几乎不用)
                 */
    
                 // 创建
                var goodslist = document.createElement('div');
                goodslist.id = 'goodslist';
                goodslist.className = 'goodslist';
                // goodslist.innerHTML = '商品列表';
    
                // 创建ul
                var ul = document.createElement('ul');
    
                for(var i=0;i<100;i++){
                    // 创建li
                    var li = document.createElement('li');
    
                    // // 创建class属性节点
                    // var myclass = document.createAttribute('class');//创建节点class
                    // myclass.nodeValue = 'box';
                    // // 把属性写入li
                    // li.setAttributeNode(myclass);
                    // // console.log(myclass.nodeValue)
    
                    li.className = 'box';
    
                    // // 创建文本节点
                    // var txt = document.createTextNode('商品'+i);
    
                    // // 文本插入li
                    // li.appendChild(txt);
    
                    li.innerHTML = '商品' + i;
    
                    // li插入ul
                    ul.appendChild(li);
    
                }
    
                // ul插入div
                goodslist.appendChild(ul);
    
    
                // 把div插入页面(body)
                document.body.appendChild(goodslist);
    
                console.log(goodslist)
            }
    
    
        </script>
    
    点赞 评论 复制链接分享
  • caozhy 回答这么多问题就耍赖把我的积分一笔勾销了 10月前

    感觉你插入的位置不对,每次都插入到了之前的那个div的内部,而不是并列关系。

    点赞 评论 复制链接分享

为你推荐