使用 jQuery 从渲染的 HTML 表中提取部分时出现问题

发布于 2024-10-02 04:43:45 字数 2982 浏览 2 评论 0原文

我需要从许多表中获取某些部分,保存它们,最后使用 jQuery 模板生成一个新表。但我在收集第一个值时遇到问题。

HTML

<table>
  <tr><td colspan="7"><a href="http://link/index.php?view=page&id=2961" target="_blank" title="title">atext1 atext2</a> - stuff 2 - <img src="img/icon_1.gif" class="icon" title="icon1" />12 - <img src="img/icon_2.gif" class="icon" title="icon2" />4 - <span title="long title"><img src="img/icon_3.gif" class="icon" /> stuff 5 </span></td></tr>
  <tr><th><span title="title1">th1</span></th><th title="title2">th2</th><th title="title3">th3</th><th title="title4">th4</th><th title="title5">th5</th><th title="title6">th6</th><th title="title7">th7</th></tr>
  <tr><td class="own" style="width:10px;">&nbsp;</td><td><a href="http://link/index.php?view=page2&id=1413" target="_blank" title="title">text</a></td><td><img src="img/icon_4.png" class="icon link" title="icon4" onclick="dothis(118965,[1324,1835,2296,2443,2960,2961,2962,2964,2976,3186,4901,4974]);" /> <a href="javascript:dothat('div1',118965);" title="div1">text</a></td><td><a href="http://link/index.php?view=page3&newid=188898" target="_blank" title="page3">text</a></td><td class="right">24 (9)</td><td class="right">827</td><td class="right">11</td></tr>
  MORE SIMILAR TRs HERE
</table>

JS

var savedData = [];
tbl = $('#table_1'); // Grab all content within div, which is a whole html table 
var data = [];
$('tr', tbl).each(function(i, tr) {
  // Begin the process to grab needed parts
  if (i == 0) { // first row is special. it is colspan'ed
    row = $('td', tr).html().split(' - ');  // Splitting seems like the only way to get smaller html parts to work with
    var a_href = $(row).find('a').attr('href'); // returns undefined
    var a_href = $(row[0]).find('a').attr('href'); // returns undefined
    var a_href = $('a', row).attr('href');  // returns undefined
    var a_href = $('a', row[0]).attr('href');  // returns undefined

    // Grab id only. I thought this would work
    data['id'] = $('a', row[0]).attr('href').match(/view=page&id=([0-9]+)/)[1];
    // Grab the other parts
  } else {
    // do stuff for other rows
  }
});
savedData.push[data];

1) 为什么我的代码未定义?当分割内部 html 时,'row' 变成一个数组

2) 我也有至少 1 个 tr,只有 th 个单元格。那些从 .each() 中排除的行会更快吗,就像使用子选择器一样,或者只是忽略它(例如 if ($('td', tr).length > 0) { // do stuff }) ?

3)如果我只是从所有 tr 中的所有 td 中获取所有 text(),那么使用 jQuery.map() 比 jQuery.each(i,v) 快大约 3-4 倍。知道为什么吗?
我可以使用 $('td[colspan], tr) 来获取第一行,但是 jQuery.each() 很容易理解,因此可以使用

4) 当我需要使用收集到的部分时在模板中,我可以使用 savedData[0].id 吗?

I need to grab certain parts from many tables, save them and finally generate a new table using a jQuery template. But I am having problems collecting the first value.

HTML

<table>
  <tr><td colspan="7"><a href="http://link/index.php?view=page&id=2961" target="_blank" title="title">atext1 atext2</a> - stuff 2 - <img src="img/icon_1.gif" class="icon" title="icon1" />12 - <img src="img/icon_2.gif" class="icon" title="icon2" />4 - <span title="long title"><img src="img/icon_3.gif" class="icon" /> stuff 5 </span></td></tr>
  <tr><th><span title="title1">th1</span></th><th title="title2">th2</th><th title="title3">th3</th><th title="title4">th4</th><th title="title5">th5</th><th title="title6">th6</th><th title="title7">th7</th></tr>
  <tr><td class="own" style="width:10px;"> </td><td><a href="http://link/index.php?view=page2&id=1413" target="_blank" title="title">text</a></td><td><img src="img/icon_4.png" class="icon link" title="icon4" onclick="dothis(118965,[1324,1835,2296,2443,2960,2961,2962,2964,2976,3186,4901,4974]);" /> <a href="javascript:dothat('div1',118965);" title="div1">text</a></td><td><a href="http://link/index.php?view=page3&newid=188898" target="_blank" title="page3">text</a></td><td class="right">24 (9)</td><td class="right">827</td><td class="right">11</td></tr>
  MORE SIMILAR TRs HERE
</table>

JS

var savedData = [];
tbl = $('#table_1'); // Grab all content within div, which is a whole html table 
var data = [];
$('tr', tbl).each(function(i, tr) {
  // Begin the process to grab needed parts
  if (i == 0) { // first row is special. it is colspan'ed
    row = $('td', tr).html().split(' - ');  // Splitting seems like the only way to get smaller html parts to work with
    var a_href = $(row).find('a').attr('href'); // returns undefined
    var a_href = $(row[0]).find('a').attr('href'); // returns undefined
    var a_href = $('a', row).attr('href');  // returns undefined
    var a_href = $('a', row[0]).attr('href');  // returns undefined

    // Grab id only. I thought this would work
    data['id'] = $('a', row[0]).attr('href').match(/view=page&id=([0-9]+)/)[1];
    // Grab the other parts
  } else {
    // do stuff for other rows
  }
});
savedData.push[data];

1) Why am I getting undefined ? 'row' becomes an array when splitting the inner html

2) I also have at least 1 tr with only th cells. Would it faster those rows where excluded from the .each(), like with a sub selector, or just ignore it (like if ($('td', tr).length > 0) { // do stuff }) ?

3) If I just grab all text() from all td in all tr then using jQuery.map() is about 3-4 times faster than jQuery.each(i,v). Any idea why ?
I can use $('td[colspan], tr) to grab first row, but jQuery.each() is easy to understand and thus to work with

4) When I need to use the collected parts in the template, can I then use savedData[0].id ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文