javascript – jQuery：如何获取所选单元格的col和row标题

2023年3月19日 228次阅读

我目前正在开发一个具有WebView的
JavaFX项目. Html代码由String Builder构建.

I want to get the column and row headers of the selected cell.

我需要它们用于我的Java代码.
您将在following example中找到的WebPage的当前状态.

这里的代码：

$(document).ready(function() {
  $("td").click(function() {
    $("td.selected").removeClass("selected");
    $(this).addClass("selected");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>

<body>
  <table id='bookingTable'>
    <tr>
      <td></td>
      <th scope='col'>21.2.2019</th>
      <th scope='col'>22.2.2019</th>
      <th scope='col'>23.2.2019</th>
      <th scope='col'>24.2.2019</th>
      <th scope='col'>25.2.2019</th>
      <th scope='col'>26.2.2019</th>
      <th scope='col'>27.2.2019</th>
    </tr>
    <tr>
      <th scope='row'>1</th>
      <td colspan='1'>
        <div id='name'> Person One</div>
        <div id='bid'>B-ID:1</div>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td></td>
      <td colspan='4'>
        <div id='name'> Person Two</div>
        <div id='bid'>B-ID:2</div>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>4</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>5</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>6</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>7</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>8</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>9</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>10</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>11</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>

您可以在jsfiddle中看到的CSS

最佳答案困难的部分是获取列标题和行标题,这可以通过引用表父项然后单击所单击元素的特定列/行来实现.

var columnHeader = e.delegateTarget.rows[0].cells[this.cellIndex]
var rowHeader = this.parentNode.cells[0];

一旦有了这些元素,就可以使用$(element).height();轻松测量宽度和高度.和$(元素).width();.

如果这对您有用,请告诉我.

$(document).ready(function() {
  $('table').on('click', 'td', function(e) {
    var columnHeader = e.delegateTarget.rows[0].cells[this.cellIndex]
    var rowHeader = this.parentNode.cells[0];
    console.log(rowHeader)
    console.log(columnHeader)
    var rowHeadWidth = $(rowHeader).width();
    var rowHeadHeight = $(rowHeader).height();
    var columnHeadWidth = $(columnHeader).width();
    var columnHeadHeight = $(columnHeader).height();
    console.log("row header dimensions are: " + rowHeadWidth + " x " + rowHeadHeight)
    console.log("column header dimensions are: " + columnHeadWidth + " x " + columnHeadHeight)
    $("td.selected").removeClass("selected");
    $(this).addClass("selected");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>

<body>
  <table id='bookingTable'>
    <tr>
      <td></td>
      <th scope='col'>21.2.2019</th>
      <th scope='col'>22.2.2019</th>
      <th scope='col'>23.2.2019</th>
      <th scope='col'>24.2.2019</th>
      <th scope='col'>25.2.2019</th>
      <th scope='col'>26.2.2019</th>
      <th scope='col'>27.2.2019</th>
    </tr>
    <tr>
      <th scope='row'>1</th>
      <td colspan='1'>
        <div id='name'> Person One</div>
        <div id='bid'>B-ID:1</div>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>2</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>3</th>
      <td></td>
      <td colspan='4'>
        <div id='name'> Person Two</div>
        <div id='bid'>B-ID:2</div>
      </td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>4</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>5</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>6</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>7</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>8</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>9</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>10</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th scope='row'>11</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>