jQuery：如何获取所选单元格的col和row标头
[英]jQuery: How to get the col and row headers for selected cell
问题描述
I'm currently working on a JavaFX Project which has a WebView. 
我目前正在研究具有WebView的JavaFX项目。 The Html Code is builded by a String Builder. HTML代码是由String Builder构建的。
I want to get the column and row headers of the selected cell.
I need them for my Java Code. 我的Java代码需要它们。 The current state of the WebPage you'll find in the following example . 在以下示例中可以找到WebPage的当前状态。
Here the code: 这里的代码：
$(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>
The CSS you can see in the jsfiddle 您可以在jsfiddle中看到的CSS
2 个解决方案
解决方案1
1 已采纳 2019-02-21 23:37:49
The hard part is getting the column header and row header, this can be achieved with by referencing the table parent and then the specific column/row of the clicked element. 困难的部分是获取列标题和行标题，这可以通过引用表父元素然后单击被单击元素的特定列/行来实现。
var columnHeader = e.delegateTarget.rows[0].cells[this.cellIndex]
var rowHeader = this.parentNode.cells[0];
Once you have those elements you can easily measure the width and height using $(element).height(); 一旦有了这些元素，就可以使用$(element).height();轻松地测量宽度和高度$(element).height(); and $(element).width(); 和$(element).width(); . 。
Let me know if this works for you. 让我知道这是否适合您。
$(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>
解决方案2
0 2019-02-22 10:03:50
my idea with jquery. 我的想法与jQuery。
$(document).ready(function () { $("td").click(function(){ $("td.selected").removeClass("selected"); $(this).addClass("selected"); let rootMe = $(this).parents()[0]; let spanValue = Number($(this).attr('colspan')) || 1; getCurrentTHhtml(rootMe, spanValue); }); function getTH(){ let allTHValue = []; let column1 = $('#bookingTable tr').eq(0).find('th'); column1.each(function(){ allTHValue.push($(this).html()); }); return allTHValue; } function getCurrentTHhtml(rootMe, spanValue){ let inMe = rootMe.children; let j; let p = 0; let myPoint; let allColsInRow = rootMe.children.length; let thValues = getTH(); let result = []; for(j=0;j<inMe.length;j++){ if(inMe[j].localName === 'td'){ if(inMe[j].classList[0] === "selected"){ myPoint = p; } p++; } } p=0; for(j=myPoint;j<allColsInRow;j++){ if(p<spanValue) result.push(thValues[j]); p++; } console.log(result); console.log(inMe[0]); } });
td, th { border: 1px solid rgb(190, 190, 190); padding: 10px; } td:hover, td.selected { background-color: #FF9900 } th[scope="col"] { background-color: #696969; color: #fff; } th[scope="row"] { background-color: #d7d9f2; } caption { padding: 10px; caption-side: bottom; } table { border-collapse: collapse; border: 2px solid rgb(200, 200, 200); letter-spacing: 1px; font-family: sans-serif; font-size: .8rem; }
<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery-从选定行中的单元格获取数据 - jQuery - Get the data from a cell in a selected row
如何在表中查找单元格的行号和列号 - How to find row and col number of a cell in table
需要获取使用jQuery为其选择单元格的表行数据 - Need to get the table row data for which cell is selected using jQuery
选择特定行时如何从行中的单元格获取值 - How to get value from a cell in a row when a certain row is selected
如何获取使用JQuery单击的行的表格单元格 - How to get the table cell of a row that was clicked with JQuery
如何通过javascript / jquery获取单元格中的元素行？ - How to get row of element in cell by javascript/jquery?
获取Flexigrid的选定单元格的列和行号 - Get column and row number of the selected cell of a Flexigrid
获取每个选定行的表格的单元格值？ - Get a cell value of table for each selected row?
如何在自动完成的JQuery UI中获取选定行的ID - How to get id of selected row in autocomplete JQuery UI
在jQuery中，如何获取使用复选框选择的表的特定行的值？ - In jquery how to get the values of a particular row of a table that is selected using checkbox?
相关标签