尽管有 rowspan 和 colspan 属性，但仍正确突出显示表格 - 没有 jQuery答案

【问题标题】：Highlighting a Table Correctly Despite rowspan and colspan attributes - WITHOUT jQuery尽管有 rowspan 和 colspan 属性，但仍正确突出显示表格 - 没有 jQuery
【发布时间】：2011-02-04 23:44:50
【问题描述】：

感谢另一个部门的一些 !#$#@ 写了一些垃圾代码，我无法使用 jQuery 库——尽管我非常渴望这样做。他们的软件已经发布到世界上，我必须兼容。

=============================================

我正在尝试突出显示一个表格。期望的行为：

单击正文中的单元格会突出显示该行。
单击标题中的单元格会突出显示该列。
如果列和行都突出显示，则交叉点以不同的颜色突出显示（超级突出显示）。
点击之前超高亮显示的单元格会关闭高亮显示。

这种行为对于基本表来说很简单，但是当 rowspan 和 colspan 开始抬起他们丑陋的头时，事情开始变得有点不稳定......例如，突出显示单元格 [5] 不再可靠地工作。

我的想法是，为了加快突出显示本身的执行时间（通过更改类名），是预先计算所有单元格的“偏移量” - 使用“colStart”和“colEnd”、“rowStart”当页面加载并以某种方式将其存储在数组中时为“rowEnd”。

问题：您将如何实现此功能？我的 JavaScript 相当生疏，我的编程技能非常初级，如果得到一些指导，我会受益匪浅。

谢谢，

斯科特。

【问题讨论】：

标签： javascript

【解决方案1】：

如果不能使用 jQuery 的原因是技术性的（例如有人用 $ 做傻事），你可以试试 jQuery 的 noConflict 模式。只是想让你意识到这一点 =)

你的预计算系统似乎对我有用，否则。

【讨论】：

不，这与另一个库没有冲突 - 他们的代码以某种方式破坏了 jQuery，我无法确定如果没有他们的源代码，我不知道该怎么做。

【解决方案2】：

我制作了一个脚本，可以检测带有 colspans 的标题和子标题，但表格行中没有 rowspans：

jQuery('#yourTable tbody td').bind('click',function(e) {
var tr = jQuery(e.target).parent('tr');
var y = parseInt(jQuery('tr', this).index(tr));
var x = parseInt(tr.children('td').index(jQuery(e.target)));
var jTdFecha = tr.find('td:first');
var sFecha = jTdFecha.text();
var arrCeldas = {};
var arrEncabezados = {};
var arrJFila = {};
var nTemp = 0;
var jTdEncabezadoFecha,nCantCabeceras,jTemp, nI, nJ, nK, nL, bTemp;

arrJFila[1]={
    'arrHijos' : jQuery('#yourTable tbody tr:first-child')
};
jTdEncabezadoFecha = arrJFila[1]['arrHijos'].find('td:first');
nCantCabeceras = jTdEncabezadoFecha.attr('rowspan');
for(nI=1;nI<=nCantCabeceras;nI++){
    if(nI>1){
        arrJFila[nI]={
            'arrHijos'  : arrJFila[nI-1]['arrHijos'].next()
        };
    }
    arrCeldas[nI] = {
        'arrHijos'      : arrJFila[nI]['arrHijos'].children(),
        'arrColspan'    : {},
        'arrRowspan'    : {},
        'nCant'         : '',
        'arrLastIndex'  : {},
        'arrLastSavedColspan': {},
        'arrLastColspan': {}
    };
    for(nJ=0;nJ<=nCantCabeceras;nJ++){
        arrCeldas[nI]['arrLastIndex'][nJ] = 0;
        arrCeldas[nI]['arrLastColspan'][nJ] = 0;
        arrCeldas[nI]['arrLastSavedColspan'][nJ] = 0;
    }
}
for(nI=1;nI<=nCantCabeceras;nI++){
    arrCeldas[nI]['nCant'] = arrCeldas[nI]['arrHijos'].length;
    nTemp = 0;
    for(nJ=0;nJ<arrCeldas[nI]['nCant'];nJ++){ //Recorremos todas las celdas de cada cabecera
        jTemp = jQuery(arrCeldas[nI]['arrHijos'][nJ]);
        arrCeldas[nI]['arrColspan'][nJ] = parseInt(jTemp.attr('colspan'));
        arrCeldas[nI]['arrRowspan'][nJ] = parseInt(jTemp.attr('rowspan'));
        if(nI>1){
            for(nK=1;nK<nCantCabeceras;nK++){
                arrCeldas[nI]['arrLastColspan'] = arrCeldas[nI]['arrLastColspan'];
                if (nI-nK>0){
                    //Recorremos las cabeceras anteriores
                    bTemp = nK==1?true:((arrCeldas[nI]['arrLastColspan'][nK]<=arrCeldas[nI]['arrLastColspan'][nK-1]));
                    if(bTemp){
                        if(nI-nK==1){
                            bTemp = (arrCeldas[nI]['arrLastColspan'][nK]<nTemp);
                        }
                    }
                    //console.warn('nI: '+nI+' nK: '+nK+' arrLastColspan[nK='+nK+']:'+arrCeldas[nI]['arrLastColspan'][nK]+' arrLastColspan[nK-1='+(nK-1)+']:'+arrCeldas[nI]['arrLastColspan'][nK-1]);
                    if(bTemp){
                        for(nL=arrCeldas[nI]['arrLastIndex'][nK];nL<arrCeldas[nK]['nCant'];nL++){
                            if((parseInt(arrCeldas[nK]['arrRowspan'][nL])<=1) || isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))){
                                arrCeldas[nI]['arrLastIndex'][nK] = nL + 1;
                                if(isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))==false){
                                    if((arrCeldas[nI]['arrLastColspan'][nK]<=arrCeldas[nI]['arrLastSavedColspan'][nK-1]) || (nK==1)){
                                        arrCeldas[nI]['arrLastColspan'][nK] += arrCeldas[nK]['arrColspan'][nL];
                                    }
                                }
                                break;
                                nL = 999999; //salimos del FOR.
                            }
                            if(nL!= 999999){
                                if(isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))==false){
                                    if(arrCeldas[nI]['arrLastColspan'][nK]<=arrCeldas[nI]['arrLastSavedColspan'][nK-1]){
                                        arrCeldas[nI]['arrLastColspan'][nK] += arrCeldas[nK]['arrColspan'][nL];
                                    }
                                    nTemp += arrCeldas[nK]['arrColspan'][nL];
                                }
                            }
                            //console.warn(isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))+':'+parseInt(arrCeldas[nK]['arrColspan'][nL])+' nI:'+nI+' nL:'+nL+' nK:'+nK+' text: '+jQuery(arrCeldas[nK]['arrHijos'][nL]).text()+' arrLastColspan[nK='+nK+']:'+arrCeldas[nI]['arrLastColspan'][nK]+' arrLastIndex[nK='+nK+']:'+arrCeldas[nI]['arrLastIndex'][nK]);
                        }
                    }
                }
            }
            //console.warn('nI: '+nI+' nJ: '+nJ+' pre:  x:'+x+' nTemp:'+ nTemp);
            if(x<=(nTemp-1)){
                arrEncabezados[nI] = '';
                break;
                nJ = 999999; //salimos del FOR.
            }
        }
        if(nJ!= 999999){
            nTemp += arrCeldas[nI]['arrColspan'][nJ];
            if(x<=(nTemp-1)){
                for(nK=1;nK<=nCantCabeceras;nK++){
                    arrCeldas[nK]['arrLastSavedColspan'][nI] = nTemp;
                }
                arrEncabezados[nI] = jTemp.text();
                break;
                nJ = 999999; //salimos del FOR.
            }
        }
        //console.warn('nI: '+nI+' nJ: '+nJ+' post:  x:'+x+' nTemp:'+ nTemp+' text:'+jTemp.text()+' arrLastColspan [0]:'+arrCeldas[nI]['arrLastColspan'][0]+'  [1]:'+arrCeldas[nI]['arrLastColspan'][1]+' [2]:'+arrCeldas[nI]['arrLastColspan'][2]+'[3]:'+arrCeldas[nI]['arrLastColspan'][3]+' arrLastSavedColspan [0]:'+arrCeldas[nI]['arrLastSavedColspan'][0]+'  [1]:'+arrCeldas[nI]['arrLastSavedColspan'][1]+' [2]:'+arrCeldas[nI]['arrLastSavedColspan'][2]+'[3]:'+arrCeldas[nI]['arrLastSavedColspan'][3]);
    }
}
console.warn(arrEncabezados[1]+' '+arrEncabezados[2]+' '+arrEncabezados[3]+' bTemp: '+bTemp+' nCantCabeceras: '+nCantCabeceras+' Fecha:'+sFecha+' ¿se ve fecha?:'+(isScrolledVerticalIntoView(jTdFecha.get(0))&&isScrolledHorizontalIntoView(jTdFecha.get(0)))+' ¿se ve encabezado?:'+(isScrolledVerticalIntoView(jTdEncabezadoFecha.next().get(0))&&isScrolledHorizontalIntoView(jTdEncabezadoFecha.next().get(0))));

tr = '';
y = '';
x = '';
jTdFecha = '';
sFecha = '';
arrCeldas = '';
arrEncabezados = '';
arrJFila = '';
nTemp = '';
jTdEncabezadoFecha = '';
nCantCabeceras = '';
jTemp = ''; 
nI = ''; 
nJ = '';
nK = '';
nL = '';
bTemp = '';

})

我仍在考虑如何检测具有行跨度的行

【讨论】：