別のHTMLテーブルからHTMLテーブルを作成するjQuery関数

Question

jQueryを使用して情報を取得し、消去/消去し、新しい「クリーン」HTMLテーブルを作成する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> 

は

以下のマイケル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

私の提案は、一度に1パートずつ分割することです。あなたは、開始するには：内の単一のループであなたはまた、すべてのことを行うことができます：

は、データ転送先テーブルに

// 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); 
} 

注意を、それを送信する

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

を取得します$('tr.dirRow').each()。