表格cellIndex和rowIndex与colspan / rowspan [英] Table cellIndex and rowIndex with colspan/rowspan
问题描述
我正在使用以下提供的答案：
但在这种情况下，它似乎不起作用： http://jsfiddle.net/TRr6C/9/
注意1,3 1,4和2 ，4应该是1,4 1,5和2,5
任何人看到有什么不对？
或者有没有更好的解决方案，从表格单元格的cellIndex和rowIndex考虑到colspan和rowspan？
以下是代码：
function getCellLocation（cell）{
var cols = cell.closest（tr）。children（td）。index （细胞）;
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（）{
//获取搜索单元格的行索引
var rowindex = cell .closest（tbody）。children（tr）.index（$（this））;
//将行分配给一个变量供以后使用
var row = $（this）;
row.children（td）。each（function（）{
//获取该行的所有单元
var colindex = row.children（td）。index（$ （this））;
//检查这个单元格是否在单元格之前
if（cell.offset（）。left> gt; $（this）.offset（）。left）{
//检查它是否同时具有rowspan和colspan，因为单个元素在
之前处理var colspn = parseInt（$（this）.attr（colspan））;
var rowspn = parseInt（$ （this）.attr（rowspan））;
if（colspn& amp; rowspn）{
if（rowindex + rowspn> rows）
cols + = colspn;
}
}
}）;
}）;
return {
rows：rows，
cols：cols
};
}
我的解决方案是jQuery插件，因为我可以想象拥有这个信息的不止一个目的。它可以用于：
$（table tbody td）。each（function（）{
$（this）.text（$（this）.cellPos（）。top +，+ $（this）.cellPos（）。left）;
}）;
头寸的形式为 {top：rows，left：cols} 。
在第一次调用时，将扫描表并使用它们的缓存位置 TD 元素获取 data 项。 （缓存可以通过调用参数 true 来重建）。所有进一步的调用只是返回缓存的值。
希望这有助于！
完整资料来源：
$ b
$ b
/ * cellPos jQuery插件
---------------------
获取可视化单元格在HTML表格中的位置（或者像它的块那样）。
返回值是top和left属性设置为左上角单元格的行和列索引的对象。
使用示例：
$（＃myTable tbody td）。each（function（）{
$（this）.text（$（this）.cellPos（）。top + ，+ $（this）.cellPos（）。left）;
}）;
* /
（函数（$）{
/ *）扫描单个表格，并以{left：x-coord，top：y-coord}格式设置cellPos数据* /
函数scanTable（$ table）{
var m = [];
$ table.children（tr）.each（function（y，row）{
$（row ）.children（td，th）.each（function（x，cell）{
var $ cell = $（cell），
cspan = $ cell.attr（colspan）| 0 ，
rspan = $ cell.attr（rowspan）| 0，
tx，ty;
cspan = cspan？cspan：1;
rspan = rspan？rspan：1 ;
for（; m [y]& m [y] [x]; ++ x）; //跳过当前行已占用的单元格
for（tx = x; tx< ; x + cspan; ++ tx）{//标记当前单元格的矩阵元素为真（
）（ty = y; ty
m [ty] = [];
}
m [ty] [tx] = true;
}
}
var pos = {top：y，left：x};
$ cell.data（cellPos，pos）;
}）;
}）;
};
$ b $ *插件* /
$ .fn.cellPos =函数（重新扫描）{
var $ cell = this.first（），
pos = $ cell .data（cellPos）;
if（！pos || rescan）{
var $ table = $ cell.closest（table，thead，tbody，tfoot）;
scanTable（$ table）;
}
pos = $ cell.data（cellPos）;
返回pos;
}
}）（jQuery）;
I was using the answer provided in:
How can I find each table cell's "visual location" using jQuery?
But it doesn't seem to work in this case: http://jsfiddle.net/TRr6C/9/
Notice the 1,3 1,4 and 2,4 should be 1,4 1,5 and 2,5
Anyone see whats wrong?
Or is there any better solution to get the cellIndex and rowIndex from a table cell taking into consideration colspan and rowspan?
Here is the code:
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;
}
}
});
});
return {
rows: rows,
cols: cols
};
}
My solution is in form of jQuery plugin since I can imagine more than one purpose of having this information. It can be used as in:
$("table tbody td").each(function(){
$(this).text( $(this).cellPos().top +","+ $(this).cellPos().left );
});
The position is in form of { top: rows, left: cols }.
On its first call, table is scanned and TD elements get data items with their cached position. (Cache can be rebuilt by calling with argument true). All further calls just return that cached value.
Hope this helps!
Full source:
/* cellPos jQuery plugin
---------------------
Get visual position of cell in HTML table (or its block like thead).
Return value is object with "top" and "left" properties set to row and column index of top-left cell corner.
Example of use:
$("#myTable tbody td").each(function(){
$(this).text( $(this).cellPos().top +", "+ $(this).cellPos().left );
});
*/
(function($){
/* scan individual table and set "cellPos" data in the form { left: x-coord, top: y-coord } */
function scanTable( $table ) {
var m = [];
$table.children( "tr" ).each( function( y, row ) {
$( row ).children( "td, th" ).each( function( x, cell ) {
var $cell = $( cell ),
cspan = $cell.attr( "colspan" ) | 0,
rspan = $cell.attr( "rowspan" ) | 0,
tx, ty;
cspan = cspan ? cspan : 1;
rspan = rspan ? rspan : 1;
for( ; m[y] && m[y][x]; ++x ); //skip already occupied cells in current row
for( tx = x; tx < x + cspan; ++tx ) { //mark matrix elements occupied by current cell with true
for( ty = y; ty < y + rspan; ++ty ) {
if( !m[ty] ) { //fill missing rows
m[ty] = [];
}
m[ty][tx] = true;
}
}
var pos = { top: y, left: x };
$cell.data( "cellPos", pos );
} );
} );
};
/* plugin */
$.fn.cellPos = function( rescan ) {
var $cell = this.first(),
pos = $cell.data( "cellPos" );
if( !pos || rescan ) {
var $table = $cell.closest( "table, thead, tbody, tfoot" );
scanTable( $table );
}
pos = $cell.data( "cellPos" );
return pos;
}
})(jQuery);
这篇关于表格cellIndex和rowIndex与colspan / rowspan的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
