我正在尝试通过使用jquery中的header(th)的名称来获取表列数据。
x1 x2 y1 y2
2 1 2 4
4 4 5 3
7 5 3 4
7 3 1 9
在这种情况下,我想通过x2获取数据,那么它应该返回我1,4,5,3
我的桌子-
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>x1</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>122</td>
<td>12</td>
</tr>
</tbody>
</table>
答案 0 :(得分:0)
这是使用jQuery filter()函数和CSS nth-child()选择器的一种方法:
<table border="1" class="dataframe" id="table">
<thead>
<tr style="text-align: right;">
<th>x1</th>
<th>x2</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>1</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td>7</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>7</td>
<td>3</td>
<td>1</td>
<td>9</td>
</tr>
</tbody>
</table>
<script>
let chosenHeaderText = 'x2',
tableHeaders = $('#table th'),
chosenHeader = tableHeaders.filter(function(header) {
return tableHeaders[header].innerHTML == chosenHeaderText;
}),
chosenHeaderIndex = chosenHeader[0].cellIndex + 1,
rows = $('#table tr td:nth-child(' + chosenHeaderIndex + ')');
rows.each(function(row) {
console.log(rows[row].innerHTML);
});
</script>
您可以使用所需的任何标头替换selectedHeaderText变量。
答案 1 :(得分:0)
您可以利用jQuery map()
函数首先获取标题的索引,然后在此基础上迭代表的主体。
const getData = (column) => {
let indx
$('thead').find('th').map(function(i){
if($(this).text() === column)
indx = i
})
$('tbody').find('tr').map(function(i){
let chk = $(this).find('td').eq(indx).text()
console.log(chk)
})
}
let data1 = getData(`x1`)
console.log(data1)
console.log(`=================`)
let data2 = getData(`y1`)
console.log(data2)
console.log(`=================`)
let data3 = getData(`y2`)
console.log(data3)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th>x1</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1A</td>
<td>122</td>
<td>12</td>
</tr>
<tr>
<td>1B</td>
<td>123</td>
<td>13</td>
</tr>
<tr>
<td>1C</td>
<td>124</td>
<td>14</td>
</tr>
</tbody>
</table>