时间戳

首页 > 解决方案 > 如何在javascript中附加table>tr in table>tbody(已经存在的表)(使用Chrome扩展)

javascript - 如何在javascript中附加table>tr in table>tbody(已经存在的表)(使用Chrome扩展)

问题描述

我正在使用 chrome 扩展。我的主要问题是我无法在 tbody 下附加我的 tr，因为错误发生并说明“无法读取属性 'getElementsByTagName' of null”。那么如何使用 javascript 将其附加到 chrome 扩展中。 

In background.js I have tried this:

response.json().then(function (data) {
                var dResponse = data.results;
                if (dResponse.length > 0) {
                     var tableRef = document.getElementsByTagName('tbody')[0];


                    for (var obj = 0; obj < dResponse.length; obj++) {
                        var result = '<tr>' +

                            '<td>' + dResponse[obj].title + '</td>' +
                            '<td>' + dResponse[obj].category_path + '</td>' +
                            '<td>' + dResponse[obj].price + '</td>' +
                            '<td>' + dResponse[obj].num_favorers + '</td>' +
                            '<td>' + dResponse[obj].tags + '</td>';

                        result += '</tr>';
                        var tableRef = 
                         tableRef.appendChild(result);
                        console.log(result);
                    };
                }

            });

我正在点击 API，并且我的响应在数据之下。当我控制台我的结果以便输出 tr 即将到来时。var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

var tableRef = document.getElementsByTagName('tbody')[0];
both lines are giving this "Cannot read property 'getElementsByTagName' error
I also tried other ways to append but everytime it gives same error.I am not getting why this is happening.


   response.json().then(function (data) {
                   var dResponse = data.results;
                   if (dResponse.length > 0) {
                        var tableRef = document.getElementsByTagName('tbody')[0];


                       for (var obj = 0; obj < dResponse.length; obj++) {
                           var result = '<tr>' +

                               '<td>' + dResponse[obj].title + '</td>' +
                               '<td>' + dResponse[obj].category_path + '</td>' +
                               '<td>' + dResponse[obj].price + '</td>' +
                               '<td>' + dResponse[obj].num_favorers + '</td>' +
                               '<td>' + dResponse[obj].tags + '</td>';

                           result += '</tr>';
                           var tableRef = 
                            tableRef.appendChild(result);
                           console.log(result);
                       };
                   }

               });
   ```




   ```background.html```



    <div class="table-responsive mb-0" data-toggle="lists">
             <table class="table table-sm table-nowrap card-table" id="myTable">
                           <thead>
                               <tr>
                                   <th>Product Name</th>
                                   <th>Category</th>
                                   <th>Price</th>
                                   <th>Favourites</th>
                                   <th>Tags</th>
                               </tr>
                           </thead>
                           <tbody>

                           </tbody>

                       </table>
                   </div>
   ```

   <script src="background.js"></script>







>     I am getting error "Cannot read property 'getElementsByTagName' of null". I only want to append my tr under tbody

标签： javascript

解决方案

我认为您的 background.js 在页面加载之前执行，您无法访问“tbody”

这是页面加载后如何运行 background.js。

<script>
    function init(){
     var tag = document.createElement("script");
     tag.src = "background.js";
     document.getElementsByTagName("head")[0].appendChild(tag);
    }
</script>
<head></head>
<body onload='init()'>
    <table><tbody><tbody></table>
</body>

推荐阅读