javascript - jQuery:如何获取所选单元格的列标题和行标题

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

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

我的 Java 代码需要它们。您将在 following example 中找到网页的当前状态.

这里是代码:

$(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(); 和 $(element).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>

关于javascript - jQuery:如何获取所选单元格的列标题和行标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54817750/

javascript - jQuery:如何获取所选单元格的列标题和行标题

上一篇：javascript - 删除动态元素 Reactjs

下一篇：javascript - 在秒表上按 "stop"后如何停止时间运行