0

当我单击鼠标右键时，我需要看到特定的 css 类。如果单击左然后它照常工作。HTML 代码：

<table id="table-1">
<thead>
    <tr>
        <th></th>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>Row1</th>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>            
    </tr>
    <tr>
        <th>Row3</th>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>            
    </tr>
    <tr>
        <th>Row3</th>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>            
    </tr>
    <tr>
        <th>Row4</th>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>            
    </tr>
    <tr>
        <th>Row5</th>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>           
    </tr>     
</tbody>
</table>

CSS：

.hi_td {background-color:red}
.hi_th {background-color:#fcc}

JavaScript：

mdown=false; msel=[[],[]];
var funcfalse=function(){console.log('selsta');}
var getpos=function(o,i){var o=$(o); // get position of current cell               
msel[0][i]=o.parent().index();   // set row
msel[1][i]=o.index();            // set column
return msel;
}
var modsel=function(o){
var numsrt=function(a,b){return a-b;}
var r=getpos(o,1)[0].slice(0);r.sort(numsrt);
var c=       msel[1].slice(0);c.sort(numsrt);
$trs=$('#table-1 tbody tr');
$('td',$trs).removeClass('hi_td');
$trs.slice(r[0],r[1]+1).each(function(){
    $('td',this).slice(c[0]-1,c[1]).addClass('hi_td');});
$("#table-1 thead tr th").removeClass('hi_th')
    .slice(c[0],c[1]+1).addClass('hi_th');
$("#table-1 tbody tr th").removeClass('hi_th')
    .slice(r[0],r[1]+1).addClass('hi_th');    
}             
var hover=function(ev){ if (mdown) modsel(this); }
var mo=function(ev){ mdown=(ev.type=='mousedown')?1:0;
getpos(this,1-mdown);
if (mdown) modsel(this);
}
var $tbl = $("#table-1"),$tblHead = $("#table-1 thead tr");
$("tbody td",$tbl)
.on({"mousedown":mo,"mouseup":mo,"mouseenter":hover,"selectstart":funcfalse});

在下面的 JsFiddle 链接中，我希望看到红色突出显示以进行右键单击。链接：http: //jsfiddle.net/RmAqP/34/

4

1 回答 1

0

看着你的小提琴代码工作正常。通过鼠标右键或左键单击突出显示正确的行/列。我猜您也想这样做，这样您就不会出现任何右键单击上下文菜单并妨碍您添加

oncontextmenu="return false"

到您想要此功能的元素可以实现该目标。

在这里更新你的小提琴：http: //jsfiddle.net/RmAqP/36/

编辑：我定期运行 Chrome/Firefox，这是这段代码工作的地方，但再次查看这与 IE 不兼容，你没有指定浏览器是否对你很重要

于 2013-08-27T12:16:05.170 回答