#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, включая множество других данных.