创建js填充表的可点击行

Question

I've created a table using an AJAX request to the database of items in our inventory displaying a picture/part name/price/stock remaining. 我已经使用AJAX请求创建了一个表格，该表格对库存商品的数据库显示了图片/零件名称/价格/剩余库存。 When the table displays I would like to be able to click on any part of one of the rows and have it link to the item page associated with that item but it won't work. 当表格显示时，我希望能够单击其中一行的任何部分，并将其链接到与该项目相关联的项目页面，但是它将无法工作。

I've tried the on.click with a static table written right into the html and it worked fine. 我已经尝试了将on.click与直接写入html的静态表一起使用，并且效果很好。 Also if I direct the on.click script to just the table id instead of the table id and tr i can make the entire table clickable to the first row's href. 同样，如果我将on.click脚本仅指向表ID而不是表ID，那么我可以使整个表可单击到第一行的href。 So it appears that since the tr doesn't really exist in the html the javascript won't find it. 如此看来，由于tr确实不在html中，因此javascript找不到它。 Is there a way to get the script to recognize each 's href attribute? 有没有办法让脚本识别每个的href属性？

HTML CODE + on.click script: HTML CODE + on.click脚本：

<html>    
        <body>
            <table id="ctable">
                <tbody id="tbody1" class="tbody1">
                </tbody>
            </table>

            <script>
                $('#ctable tr').click(function() {
                    var href = $(this).find("a").attr("href");
                    if(href) {
                        window.location = href;
                    }
                });
            </script>

        </body>
    </html>

.JS File CODE that creates table from .php file/mysql database 从.php文件/ mysql数据库创建表的.JS文件CODE

 document.addEventListener('DOMContentLoaded', function() {
        $.post('test.php', function(data) {
            $("#tbody1").empty();

            $.each(JSON.parse(data), function (index, value){
                var eachrow = "<tr>" +
                "<td class=\"image\">" + '<img src="images/thumbs/' + 
                value.image + '">' + "</td>" +
                "<td>" + '<a href="' + value.link + '">' + value.part + " 
                </td>" +
                "<td>" + value.price + "</td>"
                "<td>" + value.stock + "</td>"
                "</tr>";
                $('#tbody1').append(eachrow);
            });
        });
    }, false);

Answer 1

If you are dynamically adding rows, you need to either restructure your click event to listen from the context of the parent as in: 如果要动态添加行，则需要重新构造click事件以从父级上下文进行侦听，如下所示：

$("#tbody1").on("click", "tr", function(e) {

});

Assuming #tbody1 is a good place to start since you probably don't want the header row to be clickable. 假定#tbody1是一个不错的起点，因为您可能不希望标题行可单击。 Or, every time you dynamically add rows, since the code is rebuilding the table, you can reattach the click event handlers: 或者，每次动态添加行时，由于代码正在重建表，因此可以重新附加click事件处理程序：

      $("#tbody1").empty();

        $.each(JSON.parse(data), function (index, value){
            var eachrow = "..
            $('#tbody1').append(eachrow);
        });

        // or .on("click", function() { })
        $("#tbody1 tr").click(function() { });

If you attach click handler via on, it would be good to then do an off as in: 如果您通过on附加点击处理程序，那么最好执行off的操作，如下所示：

$("#tbody1").off("click", "tr");

To remove the existing click handlers. 删除现有的单击处理程序。

创建js填充表的可点击行

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-04-27 21:24:12

创建js填充表的可点击行

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-04-27 21:24:12

解决方案1
0 已采纳 2018-04-27 21:24:12