Функция jQuery для создания таблицы HTML из другой таблицы HTML

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

который я хотел бы, чтобы ввести информацию в следующую таблицу (отформатированную таким образом, чтобы использовать плагин, который принимает этот вход и форматирует его таблицу в диаграмму org). Я прокомментировал, как информация должна быть изменена из исходной таблицы 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> 

Обновленные мой код, основанный на ответ Майкла Sacket в ниже

теперь у меня есть все переменные в нужном формате, но нужно создать новые <tr> S на основе этих переменных.

$('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().