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

我有一个非常整洁的结构化数据的网页。大约有20个“父母”和大约1000个“孩子”。现在，我展示了所有孩子的一张巨大的桌子。我想要做的是显示父母的表格，并有一个按钮/切换为每行可以在点击会时：在新创建的表格行中加载HTML内容

在表
添加父下方的一行执行GET请求来显示在接下来的该行

儿童的HTML表格点击按钮/切换从该表

我的HTML看起来像这样删除该行：

<table id="tableofparents"> 
    <tr> 
    <th>Buttons</th> 
    <th>Col B</th> 
    <th>Col C</th> 
    </tr> 
    <tr class="adder" id="101"> 
    <td id="101" class="toggleChildren">Button</td> # unique id per row already exists 
    <td>Info Field 1</td> 
    <td>Info Field 2</td> 
    </tr> 
    <tr class="adder" id="202"> 
    <td id="202" class="toggleChildren">Button</td> 
    <td>Info Field 1</td> 
    <td>Info Field 2</td> 
    </tr> 
</table>

我想通了，代码从这里请在这里切换一个新的表行的创建/删除 - Toggle between the creation and destruction of a table row jquery

<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>

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

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

来源

2016-07-24 Jed Christiansen

在你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>'); 
});

我希望这会帮助你。

来源

2016-07-24 20:06:34

太棒了;它完美的作品！非常感谢！ –

欢迎您:) –

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

回答

相关问题