使包含表格的一個div分爲兩個div，其中包含表格

Question

我有一個函數可以將原始HTML輸出到表格，但是我想取出前三列並將它們放在另一個div中。

我正在考慮在隱藏的頁面上創建一個div，將此div的html設置爲我得到的原始HTML，然後使用選擇器語法將它剝離到每個表格的div中。有沒有辦法做到這一點，沒有中間的人造div保存原始的HTML？

Answer 1

我不知道究竟爲什麼你要做到這一點，而不是安排你的服務器端數據，但一個辦法，工作原理是：

$(document).ready(
    function(){ 
     $('table').click(
      function(){ 
       $('<table />').appendTo('#newTable').addClass('new'); 
       $('table').eq(0).find('tr td:first-child').each(
        function(){ 
         $(this).appendTo('.new').wrap('<tr></tr>'); 
        }); 
      }); 
    }); 

隨着（X）HTML：

<table> 
    <tr> 
     <td>1:1</td> 
     <td>1:2</td> 
     <td>1:3</td> 
    </tr> 
    <tr> 
     <td>2:1</td> 
     <td>2:2</td> 
     <td>2:3</td> 
    </tr> 
    <tr> 
     <td>3:1</td> 
     <td>3:2</td> 
     <td>3:3</td> 
    </tr> 
    <tr> 
     <td>4:1</td> 
     <td>4:2</td> 
     <td>4:3</td> 
    </tr> 
</table> 
<div id="newTable"></div> 

JS Fiddle demo

的演示使用jQuery's click()事件，但是這只是爲了顯示它交互工作;它當然可以直接放入DOM-ready/$(document).ready(function(){/* ... */});事件中。

---

上面的代碼將允許重複點擊（每次移動第一「列」到一個新的表），則編輯刪除了可能性使用jQuery's one()，得到以下的jQuery：

$(document).ready(
    function(){ 
     $('table').one('click', 
      function(){ 
       $('<table />').appendTo('#newTable').addClass('new'); 
       $('table').eq(0).find('tr td:first-child').each(
        function(){ 
         $(this).appendTo('.new').wrap('<tr></tr>'); 
        }); 
      }); 
    }); 

JS Fiddle demo, featuring one() 。

Answer 2

這一切都取決於「獲取原始HTML的功能」。它在哪裏獲得HTML？如果它的格式不是呈現的節點，那麼在呈現它之前，您應該能夠根據需要對其進行操作。如果你使用字符串格式（並且標記是有效的），jQuery真的很擅長將字符串轉換爲可遍歷的對象。例如：

var xml = '<div><span>hello</span></div>'; 
console.log($(xml).find('span')); 

在FireBug中，它將跨度顯示爲對象節點。