如何在jquery

Question

我正在尝试通过使用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>

Answer 1

这是使用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变量。

Answer 2

您可以利用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>