Как отфильтровать таблицу, найти соответствующую запись в данных json и добавить соответствующую ссылку

#javascript #jquery #html #filter

#javascript #jquery #HTML #Фильтр

Вопрос:

Я хотел бы отфильтровать второй столбец моей таблицы, найти соответствующую запись в моих «профилях» и использовать 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> 

Комментарии:

1. Не могли бы вы показать эти разные способы?

Ответ №1:

Вы можете использовать each for 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> 

Ответ №2:

Вот решение, которое предоставляет вам решение вашего запроса.

 var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];
var getTableRows = document.querySelectorAll("tbody tr");
var totalRows = getTableRows.length;
var i = 0;
while (i < totalRows) {
    let name = getTableRows[i].childNodes[1].innerHTML;
    for(let j=0; j<profiles.length; j  ){
        if(profiles[j].name === name){
            getTableRows[i].childNodes[1].innerHTML = "<a href="   profiles[j].link   ">"   name   "</a>";
        }
    }
    i  ;
} 
 <table>
<thead><th>#</th><th>Name</th>
</thead>
<tbody>
<tr><td>1<td>Susie</td></tr>
<tr><td>2<td>John</td></tr>
</tbody> 

Ответ №3:

https://jsfiddle.net/wer4mfuv/

Html-часть:

 <table id="myTable">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Susie</td>
        </tr>
    <tr>
            <td>15</td>
            <td>TEST1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
        </tr>
    <tr>
            <td>3</td>
            <td>Test</td>
        </tr>
</tbody>
 

JavaScript:

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

var trs = document.querySelectorAll("#myTable tbody tr");
Array.from(trs).forEach(a => {
    var trname = a.children[1].innerText;
    var search = profiles.find(x => x.name == trname);
    if (search != null) {
        a.children[1].innerHTML = '<a href="'   profiles.find(x => x.name == trname).link   '">'   trname   '</a>';
        a.style.display = "";
    } else {
        a.style.display = "none";
    }
  });
 

Ответ №4:

Просто используйте jQuery (я предполагаю, что вы согласны с этим?), Чтобы добавлять записи динамически. Кроме того, не используйте таблицы. Вы должны использовать <div> s в сочетании с flexbox. Смотрите пример:

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

$(document).ready(function() {
  for (var i = 0; i < profiles.length; i  ) {
    var html = '<div>';
    html  = '<div>'   profiles[i].name   '</div>';
    html  = '<div><a href="'   profiles[i].link   '" target="_blank">Link</a></div>';
    html  = '</div>';
    $("#people").append(html);
  }
}); 
 #people {
  display: flex;
  flex-direction: column;
}

#people>div {
  display: flex;
  border-bottom: 1px solid black;
}

#people>div>div {
flex: 1;
padding: 0.5em;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>People</h1>
<div id="people"></div> 

Другим, даже более современным подходом было бы полностью избавиться от дополнительного столбца и сделать всю строку доступной для просмотра:

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

$(document).ready(function() {
  $("#people").on("click", ">div", function() {
    //window.location.href = $(this).data('url');
    console.log("Going to: "   $(this).data('url'));
  });

  for (var i = 0; i < profiles.length; i  ) {
    var html = '<div data-url="'   profiles[i].link   '">';
    html  = '<div>'   profiles[i].name   '</div>';
    html  = '<div>Some other use data...</div>';
    html  = '</div>';
    $("#people").append(html);
  }
}); 
 #people {
  display: flex;
  flex-direction: column;
}

#people>div {
  display: flex;
  border-bottom: 1px solid black;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

#people>div:hover {
  background-color: black;
  color: white;
}

#people>div>div {
  flex: 1;
  padding: 0.5em;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>People</h1>
<div id="people"></div> 

Комментарии:

1. ПРИМЕЧАНИЕ: Вы также должны включить http: // перед ссылками, иначе браузер будет рассматривать ссылки как относительный URL!

2. Спасибо за такой подробный ответ! К сожалению, таблица, которую я использую, уже динамически создается с помощью php, включая множество других данных.