javascript - 如何过滤表格，在json数据中找到匹配的条目并添加相应的链接

Question

我想过滤表格的第二列，在我的“个人资料”中找到匹配的条目，并使用 attr('href', $(link)) 使名称成为对应的关联。

我尝试过几种不同的方法，但似乎无法让它发挥作用。

var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];

<table>
<thead><th>#</th><th>Name</th>
</thead>
<tbody>
<tr><td>1<td>Susie</td></tr>
<tr><td>2<td>John</td></tr>
</tbody>

Answer 1

您可以将 each 用于 tr 并使用 filter 来检查数组中的值，如下所示。

var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];
$(document).ready(function(){
$('tr').each(function(index,item){
 var value = $(item).find('td').eq(1).text();
 var exist = profiles.filter(c=>c.name == value);
 if(exist.length > 0){

    var link = exist[0].link;

    $(item).find('td').eq(1).html("<a href='"+ link + "'>" + value + "</a>");
 }
})
})

var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];
$(document).ready(function(){
$('tr').each(function(index,item){
 var value = $(item).find('td').eq(1).text();
 var exist = profiles.filter(c=>c.name == value);
 if(exist.length > 0){
    
    var link = exist[0].link;
    
    $(item).find('td').eq(1).html("<a href='"+ link + "'>" + value + "</a>");
 }
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead><th>#</th><th>Name</th>
</thead>
<tbody>
<tr><td>1<td>Susie</td></tr>
<tr><td>2<td>John</td></tr>
</tbody>