javascript - 我如何通过Ajax解析HTML

您要从html中提取：

$(function() {
  $.ajax({
    url: "/echo/html/",
    dataType: "html",
    success: function(data) {
      $('#name').html($(data).find('tbody tr td').text());
      $('#width').html($(data).find('nobr').text());
    },
    type: 'POST',
    data: {
      html: '<table width="100%" class="vote-answer-table"><tbody><tr><td width="24%" style="">Гранд-смета&nbsp;</td><td><div class="vote-answer-bar" style="width:80%;background-color:#1288A0"></div><span class="vote-answer-counter"><nobr>&nbsp;12 (63%)</nobr></span></td></tr><tr><td width="24%" style="">Визард (SmetaWizard)&nbsp;</td><td><div class="vote-answer-bar" style="width:14%;background-color:#993399"></div><span class="vote-answer-counter"><nobr>&nbsp;2 (11%)</nobr></span></td></tr><tr><td width="24%" style="">Смета.ру&nbsp;</td><td><div class="vote-answer-bar" style="width:14%;background-color:#990033"></div><span class="vote-answer-counter"><nobr>&nbsp;2 (11%)</nobr></span></td></tr><tr><td width="24%" style="">DefSmeta&nbsp;</td><td><div class="vote-answer-bar" style="width:6%;background-color:#CC3300"></div><span class="vote-answer-counter"><nobr>&nbsp;1 (5%)</nobr></span></td></tr><tr><td width="24%" style="">Гектор-сметчик&nbsp;</td><td><div class="vote-answer-bar" style="width:6%;background-color:#CCCC00"></div><span class="vote-answer-counter"><nobr>&nbsp;1 (5%)</nobr></span></td></tr><tr><td width="24%" style="">РИК (WinRik)&nbsp;</td><td><div class="vote-answer-bar" style="width:6%;background-color:#73E600"></div><span class="vote-answer-counter"><nobr>&nbsp;1 (5%)</nobr></span></td></tr><tr><td width="24%" style="">Госстройсмета&nbsp;</td><td><div class="vote-answer-bar" style="width:0%;background-color:#00AA00"></div><span class="vote-answer-counter"><nobr>0 (0%)</nobr></span></td></tr><tr><td width="24%" style="">Турбосметчик&nbsp;</td><td><div class="vote-answer-bar" style="width:0%;background-color:#33FFCC"></div><span class="vote-answer-counter"><nobr>0 (0%)</nobr></span></td></tr><tr><td width="24%" style="">Смета-Багира&nbsp;</td><td><div class="vote-answer-bar" style="width:0%;background-color:#3399CC"></div><span class="vote-answer-counter"><nobr>0 (0%)</nobr></span></td></tr><tr><td width="24%" style="">АВС&nbsp;</td><td><div class="vote-answer-bar" style="width:0%;background-color:#3333CC"></div><span class="vote-answer-counter"><nobr>0 (0%)</nobr></span></td></tr></tbody></table>',
      delay: 1
    }
  });
});

p {
  border: 1px solid red;
}

<p id="name">No data found!</p>
<p id="width">No data found!</p>

第一：

Гранд-сметаВизард（SmetaWizard）Смета.руDefSmetaГектор-сметчикРИК（WinRik）ГосстройсметаТурбосметчикСмета

第二：

12 2 2 1 1 1 0 0 0 0

例如，可以使用以下形式包装元素：

<em>Гранд-смета</em><span>12</span>
<em>Визард (SmetaWizard)</em><span>2</span>
<em>Смета.ру</em><span>2</span>
<em>DefSmeta</em><span>1</span>
<em>Гектор-сметчик</em>1<span></span>
<em>РИК (WinRik)</em><span>1</span>
<em>Госстройсмета</em><span>0</span>
<em>Турбосметчик</em><span>0</span>
<em>Смета-Багира</em><span>0</span>
<em>АВС</em><span>0</span>

最佳答案

您可以遍历每个tr元素，并将find与eq()结合使用，以从所需的td单元格中获取文本值。尝试这个：

var $output = $('#output');
$('table tr').each(function() {
    var $row = $(this);
    $('<em />', { text: $row.find('td:eq(0)').text() }).appendTo($output);
    $('<span />', { text: parseInt($row.find('td:eq(1)').text().trim(), 10) }).appendTo($output);
    $('<br />').appendTo($output);
});

Example fiddle