Question

我有一个非常整齐的数据网页。大约有20个“父母”和大约1000个“孩子”。现在我展示了一张包含所有孩子的大桌子。我想要做的是显示父母的表格，并为每一行点击时有一个按钮/切换：

在表格
执行GET请求以显示该行中的子项的HTML表

在下一次单击时，按钮/切换将从表中删除该行

我的HTML看起来像这样：

<script type="text/javascript">
  $(document).ready(function() 
    { 
        $('#tableofparents').on('click', ".toggleChildren", function () {
            var thisRow = $(this).parents('tr.adder');
            var hasNextRow = thisRow.next('tr.added').length;
            if (hasNextRow) {
                thisRow.next('tr.added').remove();
            } else {
                $(this).parents('tr.adder').after('<tr class="added"><td colspan="3" >This is where I want to load the HTML of the children via a GET request</td></tr>');
            }
        });
    }
</script>

我想出了从这里切换创建/删除新表格行的代码 - Toggle between the creation and destruction of a table row jquery

        command1 = "SELECT * from Foo WHERE (se = " + 
            result1.getInt("rec") + " OR rec = " 
            + result1.getInt("rec") + ")";          
        result2 = stat2.executeQuery(command1);             
        while(result2.next())
        {                   
            //this line is where the result set error pops up
            if(result2.getInt("rec") != result1.getInt("rec"))
            ...

当我点击第一行中的按钮时，它现在切换添加新表格行。但我也需要同样的点击来执行对http://example.com/childdata?id=101的GET请求，并将该请求中的HTML加载到新行中，我无法弄清楚如何做到这一点。

有没有办法将HTML加载到新创建的行中？

Answer 1

在else声明中，您可以执行此操作：

var parent = $(this).parents('tr.adder'), id = parent.attr('id');
$.get('http://example.com/childdata?id='+id, function(html) {
    parent.after('<tr class="added"><td colspan="3" >'+html+'</td></tr>');
});

我希望这会对你有所帮助。

在新创建的表行中加载HTML内容

1 个答案: