從另一個HTML表格創建HTML表格的jQuery函數

Question

我在頁面上有一個HTML表格，我想用jQuery從中獲取信息，清理/清理它，並創建一個新的「乾淨的」HTML表格信息。

我有表具有以下<tr>結構：

<tr class="dirRow"> 
    <td style="border-style:None;width:35px;"> 
     <a href="http://www.link.com"> 
      <img class="class-here" src="/media/proxy.ashx?id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&amp;size=50w50h_fxd" style="border-width:0px;height:35px;width:35px;"> 
     </a> 
    </td> 
    <td style="border-style:None;"> 
     <a href="http://www.link2.com">Full Name</a> 
    </td> 
    <td style="border-style:None;"> 
     <span>123.456.7890</span> 
    </td> 
    <td style="border-style:None;"> 
     <span>456.789.0123</span> 
    </td> 
    <td style="border-style:None;"> 
     <span>Office</span> 
    </td> 
    <td style="border-style:None;"> 
     <span>Title</span> 
    </td> 
    <td style="border-style:None;"> 
     <span>Supervisor</span> 
    </td> 
</tr> 
<!-- 150+ more tr with same structure --> 

其中我想輸入的信息到下表（格式這種方式使用一個插件，藉此表輸入格式，它轉換爲組織結構圖）。我已經評論過應該如何從原始HTML表格修改信息。

<table id="orgChartData"> 
    <tbody> 
     <tr> 
      <th>id</th> 
      <th>parent id</th> 
      <th>image</th> 
      <th>name</th> 
      <th>phone</th> 
      <th>phonecell</th> 
      <th>office</th> 
      <th>title</th> 
      <th>supervisor</th> 
     </tr> 
     <tr> 
      <td> 
       <!-- Full Name (text only, no href, goes here) --> 
       Full Name 
      </td> 
      <td> 
       <!-- Supervisor (text only, no span, goes here) --> 
       Supervisor 
      </td> 
      <td> 
       <!-- img src (just the relative path, no query string) --> 
       /media/proxy.ashx?id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx 
      </td> 
      <td> 
       <!-- Full Name (including href with "xlink:" added to the beginning of the href) --> 
       <a xlink:href="http://www.google.com/" target="_blank">Full Name</a> 
      </td> 
      <td> 
       <!-- Phone (no span) --> 
       123.456.7890 
      </td> 
      <td> 
       <!-- Phonecell (no span) --> 
       456.789.
      </td> 
      <td> 
       <!-- Office (no span) --> 
       Office 
      </td> 
      <td> 
       <!-- Title (no span) --> 
       Title 
      </td> 
      <td> 
       <!-- Supervisor (no span) --> 
       Supervisor 
      </td> 
     </tr> 
    </tbody> 
</table> 

更新我的代碼基於以下

我現在已經在正確的格式的所有變量，但需要創建基於這些變量的新<tr>邁克爾Sacket的答案。

$('tr.dirRow').each(function() { 
    var tds = $(this).children(); 
    var fullName = tds.eq(1).text(); 
    var supervisor = tds.eq(6).text(); 
    var imgSource = tds.eq(0).find("img").attr("src"); 
    var imgSourceClean = imgSource.substring(0, imgSource.indexOf('&')); 
    var fullNameHref = tds.eq(1).find("a").attr("href"); 
    var fullNameHyperlink = '<a xlink:href="' + fullNameHref + '">' + fullName + '</a>'; 
    var phone = tds.eq(2).text(); 
    var phoneCell = tds.eq(3).text(); 
    var office = tds.eq(4).text(); 
    var title = tds.eq(5).text(); 
}); 

感謝您的任何幫助。

Answer 1

我的建議是把它分開，一次一個部分。讓你開始：

獲取數據

var data = []; 
var tds = null; 
$('tr.dirRow').each(function(){ 
    tds = $(this).children(); 
    data.push({ 
     "fullName": tds.eq(1).text() 
    }); 
}); 
console.log(data); 

它發送到目標表

// grab a reference to the destination table 
var destTbody = $('#orgChartData > tbody'); 

// loop through the data adding rows 
var newRow = null; 
for(var i=0;i<data.length;i++){ 
    newRow = $('<tr/>'); 
    newRow.append($('<td>' + data[i].fullName + '</td>')); 
    destTbody.append(newRow); 
} 

注：內單循環你也可以做的一切$('tr.dirRow').each()。