时间戳

首页 > 解决方案 > 使用Javascript从带有每行标题的表中获取元素

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

问题描述

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

<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>

所以基本上主表的每一行都是一个由多行组成的表，有自己的标题。我需要在点击标题时获取每个行表的元素。我必须使用 vanilla Javascript 来做到这一点。我不应该使用任何jquery相关的插件。这就是要求。那么如何在单击该行的标题时访问每一行？目前className对于每一行都是一样的。因此，当我使用 时getElementsByClassName，我会获得每行的多次。例如：如果有五行，那么每次点击我得到每行的 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]);
}

标签： javascripthtml

解决方案

我用一些数据填充了您的表结构，以演示如何在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来演示如何反转排序顺序。使用负值，搜索顺序现在是降序的。

推荐阅读