javascript - 在表格单元格中查找单词,然后从下一个单元格中提取文本

标签 javascript jquery json

请看这个 Fiddle example 。我正在使用 ajax 脚本来解析 JSON 文件。 JSON 文件中的一项(B 项)在其表格中包含单词“Sodium”,我可以使用此脚本打印表格:

$.ajax({
    url: "url.json",
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {         
         var title = item.title;
         var table = item.table; 
            if (table.indexOf("Sodium") >= 0){
         $('.'+ title+'table').html(''+table+'')
            }
        });
    },
    error: function () {}
});

既然它能在表中找到“钠”这个词,我想知道是否有可能找到哪个 td这个词在然后找到它的下一个最接近的 td提取钠量,在本例中为 1200 mg ?会像.closest('td').text();吗?工作?但是如何选择选择器呢?

JSON 文件

[{"title":"A","table":"<table class=\"tablesorter\"><thead><tr><td >Ingredient<\/td><td >Amount<\/td><td>% Daily Value**<\/td><\/tr><\/thead><tbody><tr><td>Calories<\/td><td>10<\/td><td>&nbsp;<\/td><\/tr><tr><td>Total Carbohydrate<\/td><td>2g<\/td><td>&lt;1<\/td><\/tr><tr><td>Vitamin C<\/td><td>110mg<\/td><td>4<\/td><\/tr><tr><td>Potassium<\/td><td>235mg<\/td><td>6<\/td><\/tr><tr><td>Omega 6<\/td><td>1100mg<\/td><td>*<\/td><\/tr><tr><td>Vitamin B<\/td><td>1200mg<\/td><td>*<\/td><\/tr><tr><td>Vitamin E<\/td><td>300mg<\/td><td>*<\/td><\/tr><\/tbody><\/table>"},{"title":"B","table":"<table class=\"tablesorter\"><thead><tr><td >Ingredient<\/td><td >Amount<\/td><td>% Daily Value**<\/td><\/tr><\/thead><tbody><tr><td>Calories<\/td><td>10<\/td><td>&nbsp;<\/td><\/tr><tr><td>Total Carbohydrate<\/td><td>2g<\/td><td>&lt;1<\/td><\/tr><tr><td>Vitamin C<\/td><td>110mg<\/td><td>4<\/td><\/tr><tr><td>Potassium<\/td><td>245mg<\/td><td>6<\/td><\/tr><tr><td>Fish Oil<\/td><td>1100mg<\/td><td>*<\/td><\/tr><tr><td>Sodium (from Kitchen Salt)<\/td><td>1200mg<\/td><td>*<\/td><\/tr><tr><td>Vitamin E<\/td><td>300mg<\/td><td>*<\/td><\/tr><\/tbody><\/table>"}]

表结构:

<table class="tablesorter">
<thead>
<tr>
<td>Ingredient</td>
<td>Amount</td>
<td>% Daily Value**</td>
</tr>
</thead>
<tbody>
<tr>
<td>Calories</td>
<td>10</td>
<td></td>
</tr>
<tr>
<td>Total Carbohydrate</td>
<td>2g</td>
<td>&lt;1</td>
</tr>
<tr>
<td>Vitamin C</td>
<td>110mg</td>
<td>4</td>
</tr>
<tr>  //************************
<td>Sodium (from Kitchen Salt)</td>
<td>1200mg</td>
<td>6</td>
</tr>  //*************************
<tr>
<td>Omega 6</td>
<td>1100mg</td>
<td>*</td>
</tr>
<tr>
<td>Vitamin B</td>
<td>1200mg</td>
<td>*</td>
</tr>
<tr>
<td>Vitamin E</td>
<td>300mg</td>
<td>*</td>
</tr>
</tbody>
</table>

最佳答案

您可以使用 jQuery :contains() 选择器简单地搜索已解析的 HTML:

$.ajax({
    url: "url.json",
    success: function (data) {

        $(data.query.results.json.json).each(function (index, item) {         
            var title = item.title;
            var table = item.table; 
            if (table.indexOf("Sodium") >= 0) {
                $('.'+ title+'table').html(''+table+'');
                alert($('.'+title+'table').find('td:contains(Sodium)').next().html());
            }
        });
    },
    error: function () {}
});

Demo .

该警报调用将在其文本中包含 Sodium 的内容之后提醒 td 的内容。

关于javascript - 在表格单元格中查找单词,然后从下一个单元格中提取文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23837258/

相关文章:

jquery - Slick 在桌面上显示 2 行 6 项,在移动设备上显示 1 行 1 项

json - jq json过滤器并保持原始结构

javascript - 无法用ajax重写一些html内容

javascript - 无法让 JavaScript 在提交时运行

Javascript 高级鼠标悬停

javascript - 不断循环的字符串

javascript - Rails 5.1 Webpacker – 通过 yarn 添加 moment.js – 如何在旧 Assets JS 中使用包

javascript - 从列表中自动创建单选按钮

javascript - 在所有屏幕尺寸和溢出滚动上修复两个 div 顶部和底部

javascript - 将 JSON 信息显示到下拉列表中。Angularjs