如何找到每个表格单元格的“视觉位置"?使用jQuery? [英] How can I find each table cell's "visual location" using jQuery?

问题描述

我有一个包含 ROWSPAN 和 COLSPAN 的 HTML 表格.

I have a HTML table that contains both ROWSPANs and COLSPANs.

如何使用 jQuery 找到每个单元格的视觉位置"?

How can I find each cell's "visual location" using jQuery?

例如，这是我的表格的视觉表示，每个单元格都填充了视觉位置"算法应返回的内容:
(注意:我只关心 中的单元格，列引用可以是整数，而不是字母字符，我这样做只是为了轻松突出问题)

For example, here's a visual representation of my table with each cell populated with what the "visual location" algorithm should return:
(Note: I only really care about cells within the <tbody> and the column reference can be an integer, not an alphabetic character, I've only done this to easily highlight the problem)

+--+--+--+--+--+
|  |A |B |C |D |
+--+--+--+--+--+
|1 |A1|B1   |D1|
+--+--+--+--+  +
|2 |A2   |C2|  |
+--+     +--+  +
|3 |     |C3|  |
+--+--+--+--+--+
|4 |A4|B4|C4|D4|
+--+--+--+--+--+
|XYZ           |
+--+--+--+--+--+

我已经尝试实现第一个，但是单元格 C3 的引用不准确，因为它没有考虑 ROWPANS.第二个链接也许可以合并到第一个的解决方案中，但我不知道如何.

I've tried implementing the first, however the reference for cell C3 is inaccurate as it doesn't take into account ROWSPANS. The second link may be able to be merged into the solution of the first, but I can't figure out how.

• 在 jQuery 中处理表格 |我的科技世界
• 检索受rowspan"影响的行列的最有效方法是什么?- 堆栈溢出

我希望将其用作名为 getCellLocation(cell) 的函数，该函数将返回一个关联数组，该数组返回如下所示的位置:

I'm hoping to use this as a function called getCellLocation(cell) that will return an associative array that returns the location something like this:

function getCellLocation(cell)
{
  var row_number = parseInt($(cell).parent().prevAll().length) + 1;
  var col_number = 1;
  $(cell).prevAll('td').each(function() {
      col_number += $(this).attr('colspan') ? parseInt($(this).attr('colspan')) : 1;
  });

  var location = new Array();
  location['row'] = row_number;
  location['col'] = col_number;
  location['index'] = $('td').index(cell) + 1;
  return location;
}

$('table td').each(function(i){
  var cell = getCellLocation($(this));
  $(this).prepend('<span class="ref">R' + cell['row'] + ':C' + cell['col'] + ':D' + cell['index'] + '</span>');
});

这是示例表格的 HTML:

Here's the HTML of the example table:

<table border="1" cellspacing="0">
  <thead>
    <tr>
      <th></th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>A1</td>
      <td colspan="2">B1</td>
      <td rowspan="3">D1</td>
    </tr>
    <tr>
      <th>2</th>
      <td rowspan="2" colspan="2">A2</td>
      <td>C2</td>
    </tr>
    <tr>
      <th>3</th>
      <td>C3</td>
    </tr>
    <tr>
      <th>4</th>
      <td>A4</td>
      <td>B4</td>
      <td>C4</td>
      <td>D4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5">XYZ</td>
    </tr>
  </tfoot>
</table>
<style> span { background-color: #ffc; margin-right: .5em;} </style>

推荐答案

这是我的解决方案:

function getCellLocation(cell) {

    var cols = cell.closest("tr").children("td").index(cell);
    var rows = cell.closest("tbody").children("tr").index(cell.closest("tr"));
    var coltemp = cols;
    var rowtemp = rows;

    cell.prevAll("td").each(function() {
        cols += ($(this).attr("colspan")) ? parseInt($(this).attr("colspan")) - 1 : 0;
    });

    cell.parent("tr").prevAll("tr").each(function() {
        //get row index for search cells
        var rowindex = cell.closest("tbody").children("tr").index($(this));
        // assign the row to a variable for later use
        var row = $(this);
        row.children("td").each(function() {
            // fetch all cells of this row
            var colindex = row.children("td").index($(this));
            //check if this cell comes before our cell
            if (cell.offset().left > $(this).offset().left) {
                // check if it has both rowspan and colspan, because the single ones are handled before
                var colspn = parseInt($(this).attr("colspan"));
                var rowspn = parseInt($(this).attr("rowspan"));
                if (colspn && rowspn) {
                    if(rowindex + rowspn > rows)
                    cols += colspn;                    
                }
                if(rowspn && rowindex + rowspn > rows) cols +=1;
            }

        });
    });

我正在检查同时具有 colspan 和 rowspan 的单元格，因为其余的由此代码的前五行处理.如果这些单元格同时具有 rowspan 和 colspan，它们应该会影响除此单元格之外不低于 OR 的其他单元格，因此我需要搜索每个单元格的先前单元格以进行交互.

I'm checking for cells which have both colspan and rowspan, because the rest are handled by the first five lines of this code. If the cells have both rowspan and colspan, they should be effecting other cells that are not below OR aside this cell, so I need to search for every cell's previous cells for interaction.

这篇关于如何找到每个表格单元格的“视觉位置"?使用jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！