Question

我想按照broswer中显示的顺序获取属性' data-grid-column '的列（th）。
如a1，a2，B，c1，c2，c3，d1，d2，d3;但我无法记住它任何人都可以给我一个解决方案吗？非常感谢你！

$(function(){
  
})

.table thead tr th {
    background-color: #EEEEEE;
    border-color: #ddd #ddd gainsboro;
    vertical-align: middle;
    border-width: 1px 1px 7px;
    border-style: solid;
    vertical-align: middle !important;
}

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
<table class="table table-primary" id="myTable">
    <thead>
        <tr>
            <th class="text-center" colspan="2">A</th>
            <th class="text-center" rowspan="3" data-grid-column="B">B</th>
            <th class="text-center" colspan="3">C</th>
            <th class="text-center" rowspan="2" colspan="3">D</th>
        </tr>
        <tr>
            <th class="text-center" rowspan="2" data-grid-column="a1">a1</th>
            <th class="text-center" rowspan="2" data-grid-column="a2">a2</th>
            <th class="text-center" data-grid-column="c1">c1</th>
            <th class="text-center" data-grid-column="c2">c2</th>
            <th class="text-center" rowspan="2" data-grid-column="c3">c3</th>
        </tr>
        <tr>
            <th class="text-center" colspan="2">c1 + c2</th>
            <th class="text-center" data-grid-column="d1">d1</th>
            <th class="text-center" data-grid-column="d2">d2</th>
            <th class="text-center" data-grid-column="d3">d3</th>
        </tr>
    </thead>
</table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

Answer 1

document.querySelectorAll在文档中搜索与任何有效CSS选择器匹配的元素，并按文档顺序（基本上，它们显示在其中的顺序）返回给您。具有th属性is th[data-grid-column]的data-grid-column元素的CSS选择器所以：

var headers = document.querySelectorAll("th[data-grid-column]");

按照特定标志显示的顺序获取单元格

1 个答案: