在新創建的表格行中加載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內容

回答

相關問題