如何找到每个表格单元格的“视觉位置"使用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?

例如，以下是我的表格的直观表示，每个单元格填充了可视位置"算法应返回的内容:
(注意:我只真正关心<tbody>中的单元格，并且列引用可以是整数，而不是字母字符，我这样做只是为了轻松地指出问题)

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的引用不准确，因为它没有考虑ROWSPANS.第二个链接也许可以合并到第一个链接的解决方案中，但是我不知道如何实现.

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中使用表格|我的技术世界
• 检索受行跨度"影响的行列的最有效方法是什么? -堆栈溢出

• Working with tables in jQuery | My Tech World
• What's the most efficient way to retrieve the column of rows affected by a "rowspan"? - Stack Overflow

我希望将其用作名为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和rowpan的单元格，因为其余部分由此代码的前五行处理.如果这些单元格同时具有rowpan和colspan，则它们应该影响不低于此单元格的其他单元格，或者除了该单元格之外，因此我需要搜索每个单元格的先前单元格以进行交互.

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屋！