javascript - 使用 Javascript 从每行带有标题的表中获取元素

Question

我需要从每行都有标题的表中获取元素。它是这样的:

<table>
    <td>
        <table>
            <tr>
                <th>Name</th>
                <th>Test name</th>
                <th>Percentage</th>
            </tr>
            <tr>....contents(multiple rows of marks for a candidate)........ </tr>
        </table>
    </td>
    <td>
        <table>
            <tr>
                <th>Name</th>
                <th>Test name</th>
                <th>Percentage</th>
            </tr>
            <tr>....contents(multiple rows of marks for a candidate)........ </tr>
        </table>
    </td>
    <td>
        <table>
            <tr>
                <th>Name</th>
                <th>Test name</th>
                <th>Percentage</th>
            </tr>
            <tr>....contents(multiple rows of marks for a candidate)........ </tr>
        </table>
    </td>
</table>

所以基本上主表的每一行都是一个由多行组成的表，有自己的标题。我需要在单击标题时获取每个行表的元素。我必须使用普通 Javascript 来完成此操作。我不应该使用任何 jquery 相关插件。这就是要求。那么如何通过单击该行的标题来访问该行呢？目前，每行的 className 是相同的。因此，当我使用 getElementsByClassName 时，我会多次获取每行。例如:如果有 5 行，那么每行我得到 5 次，等于每次点击 25 次。如果我使用 setAttribute 函数，那么我仅在第一次单击按钮时获取行，因为我更改了 className。那么我应该如何解决这个问题呢？

getTable.js

th = document.getElementsByTagName('th');


for(let c=0; c < th.length; c++){
    th[c].addEventListener('click',item(c));
}


function item(c){    
    return function(){
        console.log(c);
        sortTable(c);
    }
}

function sortTable(c) {
    let table;
    table = Array.prototype.slice.call(document.getElementsByClassName("the_assessments"));
    for(let j=0; j<table.length; j++) {
        table[j].setAttribute("class","assessment_table");
        console.log(table[j]);
}

Answer 1

我用一些数据填充了您的表结构，以演示如何在 Vanilla JavaScript 中完成(升序)表排序操作:

// get the three sub-tables:
var sortdir=-1,i,
    tbls=document.querySelectorAll('table table');
for (var i=0;i<tbls.length;i++) {
// get all rows from each sub-table and dismiss the first (=header) row:
// ( Array.prototype.slice is used to generate an Array from the collection element)
var rows=Array.prototype.slice.call(tbls[i].querySelectorAll('table tr'),1)
// sort by points in third column:
rows.sort((a,b)=>(a.querySelectorAll('td')[2].textContent
                 -b.querySelectorAll('td')[2].textContent)*sortdir);
// apply the order to the sub-table:
for (var j=0;j<rows.length;j++) tbls[i].appendChild(rows[j]);
}

td, th {vertical-align:top;text-align:left}

<table><tr>
        <td>
           <table>
                <tr>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Points</th>
                </tr>
                <tr><td>Harry</td><td>Potter</td><td>87</td></tr>
                <tr><td>Hermiony</td><td>Granger</td><td>93</td></tr>
                <tr><td>Ron</td><td>Weasley</td><td>78</td></tr>
                <tr><td>Neville</td><td>Longbottom</td><td>57</td></tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Points</th>
                </tr>
                <tr><td>Draco</td><td>Malfoy</td><td>86</td></tr>
                <tr><td>Kevin</td><td>Bletchley</td><td>77</td></tr>
                <tr><td>Pansy</td><td>Parkinson</td><td>82</td></tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Points</th>
                </tr>
                <tr><td>Tamsin</td><td>Applebee</td><td>36</td></tr>
                <tr><td>Anthony</td><td>Otterburn</td><td>69</td></tr>
                <tr><td>Diego</td><td>Caplan</td><td>76</td></tr>
            </table>
        </td>
</tr></table>

包含霍格沃茨学院成员的三个子表根据第 3 列中的分数进行排序。

请注意事实上，appendChild() 并不是真正将 DOM 元素“添加”到表结构中，而是“移动”它!

编辑“排序顺序”:

我添加了全局变量sortdir来演示如何反转排序顺序。如果值为负，则搜索顺序现在会降序。