фильтра и извлечь из HTML с Javascript

Question

С помощью следующего кода (упрощенный код):

<table> 
    <tr class="alt"> 
    <td class="name"> 
     <a href="" onclick="">NAME1</a> 
    </td> 
    <td class="group"> 
     <a class="groupLink" onclick="" href="">GROUP1</a> 
    </td> 
    <td class="score">1000</td> 
    </tr> 

    <tr class="alt"> 
    <td class="name"> 
     <a href="" onclick="">NAME2</a> 
    </td> 
    <td class="group"> 
     <a class="groupLink" onclick="" href="">GROUP2</a> 
    </td> 
    <td class="score">4300</td> 
    </tr> 

    <tr class="alt"> 
    <td class="name"> 
     <a href="" onclick="">NAME3</a> 
    </td> 
    <td class="group"> 
     <a class="groupLink" onclick="" href="">GROUP1</a> 
    </td> 
    <td class="score">3000</td> 
    </tr> 
</table> 

Я хотел бы, чтобы извлечь следующую информацию для всех на GROUP1:

NAME1 Score:1000 
NAME3 Score:3000 

И писать на, если возможно, .txt. Если запись в txt невозможна на javascript, console.log тоже в порядке.

Answer 1

Вам нужно построить объект, содержащий каждую группу. Затем вам нужно отфильтровать его. Вы можете сделать что-то вроде этого:

var trs = document.querySelectorAll("tr"); 
 
var myObj = {}; 
 
for (var i = 0; i < trs.length; i++) { 
 
    // Get the group. 
 
    group = trs[i].querySelector(".groupLink").innerHTML.trim(); 
 
    myObj[group] = myObj[group] || []; 
 
    myObj[group].push({ 
 
    "name": trs[i].querySelector(".name a").innerHTML.trim(), 
 
    "score": trs[i].querySelector(".score").innerHTML.trim() 
 
    }); 
 
} 
 
console.log(myObj["GROUP1"]);

<table> 
 
    <tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME1</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" onclick="" href="">GROUP1</a> 
 
    </td> 
 
    <td class="score">1000</td> 
 
    </tr> 
 

 
    <tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME2</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" onclick="" href="">GROUP2</a> 
 
    </td> 
 
    <td class="score">4300</td> 
 
    </tr> 
 

 
    <tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME3</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" onclick="" href="">GROUP1</a> 
 
    </td> 
 
    <td class="score">3000</td> 
 
    </tr> 
 
</table>

Я получаю выход здесь:

[ 
    { 
    "name": "NAME1", 
    "score": "1000" 
    }, 
    { 
    "name": "NAME3", 
    "score": "3000" 
    } 
] 

Вы можете использовать простой цикл для форматирования вывода:

var trs = document.querySelectorAll("tr"); 
 
var myObj = {}; 
 
for (var i = 0; i < trs.length; i++) { 
 
    // Get the group. 
 
    group = trs[i].querySelector(".groupLink").innerHTML.trim(); 
 
    myObj[group] = myObj[group] || []; 
 
    myObj[group].push({ 
 
    "name": trs[i].querySelector(".name a").innerHTML.trim(), 
 
    "score": trs[i].querySelector(".score").innerHTML.trim() 
 
    }); 
 
} 
 
for (var j = 0; j < myObj["GROUP1"].length; j++) 
 
    console.log(myObj["GROUP1"][j].name + " Score: " + myObj["GROUP1"][j].score);

<table> 
 
    <tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME1</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" onclick="" href="">GROUP1</a> 
 
    </td> 
 
    <td class="score">1000</td> 
 
    </tr> 
 

 
    <tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME2</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" onclick="" href="">GROUP2</a> 
 
    </td> 
 
    <td class="score">4300</td> 
 
    </tr> 
 

 
    <tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME3</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" onclick="" href="">GROUP1</a> 
 
    </td> 
 
    <td class="score">3000</td> 
 
    </tr> 
 
</table>

Выход

NAME1 Score: 1000 
NAME3 Score: 3000 

Answer 2

В принципе, это просто вопрос итерация клеток и извлечение соответствующей информации.

Вы можете сделать это так:

const rows = document.querySelectorAll('tr'); 
 
rows.forEach(function(el){ 
 
    const name = el.querySelector(".name a").innerHTML.trim(); 
 
    const score = el.querySelector(".score").innerHTML.trim(); 
 
    console.log(`${name} Score:${score}`); 
 
});

<table> 
 
    <tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME1</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" href="" onclick="">GROUP1</a> 
 
    </td> 
 
    <td class="score">1000</td> 
 
    </tr> 
 
    <tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME2</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" href="" onclick="">GROUP2</a> 
 
    </td> 
 
    <td class="score">4300</td> 
 
    </tr> 
 
    <tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME3</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" href="" onclick="">GROUP1</a> 
 
    </td> 
 
    <td class="score">3000</td> 
 
    </tr> 
 
</table>

Answer 3

Я хотел бы, чтобы извлечь следующую информацию для всех на GROUP1

Короткое решение с использованием одного цикла с Array.prototype.forEach() функция:

var result = []; 
 
Array.prototype.slice.call(document.querySelectorAll('tr.alt')).forEach(function(el){ 
 
    var childs = el.children; 
 
    if (childs[1].children[0].innerHTML === 'GROUP1') { 
 
     this.push({Name: childs[0].children[0].innerHTML.trim(), Score: childs[2].innerHTML.trim()}) 
 
    } 
 
}, result); 
 

 
console.log(result);

<table><tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME1</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" onclick="" href="">GROUP1</a> 
 
    </td> 
 
    <td class="score">1000</td> 
 
</tr> 
 

 
<tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME2</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" onclick="" href="">GROUP2</a> 
 
    </td> 
 
    <td class="score">4300</td> 
 
</tr> 
 

 
<tr class="alt"> 
 
    <td class="name"> 
 
     <a href="" onclick="">NAME3</a> 
 
    </td> 
 
    <td class="group"> 
 
     <a class="groupLink" onclick="" href="">GROUP1</a> 
 
    </td> 
 
    <td class="score">3000</td> 
 
    </tr> 
 
</table>