0

についての解決策が必要です

  1. (like A5)特定のセル インデックスでマウスを選択するとhighlighted、ヘッダーが表示されます。
  2. それからcell(A5）他のセルでマウスドラッグすると、ヘッダー（行ヘッダー1、2、3 ...および列ヘッダーA、B、....など）とともに強調表示されます（A5からD5のすべてのセルなど）。

解決策はありますか？

最初に試した：

        $('#Mytable ').on( "click","td",function() {

        $("td").removeClass("highlighted");
        $(this).addClass("highlighted").siblings().removeClass('highlighted');
        $("th").removeClass("highlighte");
        $(this).parent().find("th").addClass("highlighte");
        var t = $('#Mytable th').eq($(this).index());
        var ad= t.text();
        $('th#'+ad).addClass("highlighte");

        } );

CSS:

   .highlighted {
     border: 2px solid #0080FF ;
    }
   .highlighte {

    background-color: #808080 ;
    }

2番目に試した：

         $(window).load(function() {
         //alert('tanim');
         var isMouseDown = false;
         $("#Mytable td")
             .mousedown(function () {
                 isMouseDown = true;
                 $(this).addClass("severalcell-highlight");
                // return false; // prevent text selection
             })
             .mouseover(function () {
                 if (isMouseDown) {
                     $(this).addClass("severalcell-highlight");
                 }
             })
             .mouseup(function () {
                 if (isMouseDown) {
                     $(this).addClass("severalcell-highlight");
                 }
             })
             .bind("selectstart", function () {
                 //return false; // prevent text selection in IE
             });

         $(document)
             .mouseup(function () {
                 isMouseDown = false;

             });
         $('#Mytable').on( "click","td",function() {

             $("td").removeClass("severalcell-highlight");
         } );
     });
4

3 に答える 3

0

テーブルのレイアウトを知らなくても、次のツール/方法を紹介できるかもしれません。

  1. その中の現在の要素をcolnr数えることによって、あなたがどの列 (Nr) にいるかを調べます( is the current ):prevAll()tdtrthistdcolnr=$(this).parent().prevAll().length
  2. thでフィルタリングして、同じ列のからタイトルを取得します$('table#name tr:eq(0) th:eq('+colnr+')')
  3. （ヘッダーを強調表示する必要があることを読んでください）次に、2で選択された適切なタイトルを強調表示します...

少し編集したmaverickosamaのソリューションを見てください（1つの関数でmouseenterとmouseleaveイベントを組み合わせています）、ここを参照してください：JSfiddle

完全なソリューションについては、この投稿を参照してください。

于 2013-08-01T07:13:57.043 に答える
0

ヘッダーの強調表示の問題はまだ解決していませんが、残りは機能します。以下を$(document).ready関数に入れます。

mdown=false;
var funcfalse=function(){ console.log('selsta'); }
var hover=function(ev){ if (mdown) $(this).toggleClass('hi_td'); }
var mo=function(ev){
 mdown=(ev.type=='mousedown');
 if (mdown) $(this).toggleClass('hi_td');
 console.log(mdown);}
 var $tbl = $("#table-1"),$tblHead = $("#table-1 thead tr");

$("tbody td",$tbl).on({"mousedown":mo,"mouseup":mo,"mouseenter":hover
                       "selectstart":funcfalse});

JSフィドル

もちろん、これはなげなわ選択ではなく、選択ボックスを意味します。マウスダウンで実際にアクセスした (ホバーした) 要素のみが選択または選択解除されます (再訪問時)。

編集 2

今それを手に入れました！ボックス型の領域を実際に選択すると、タイトルも強調表示されます (または「ハイライト」?!?) !

$(document).ready関数には次のものが必要です。

mdown=false; msel=[[],[]];   // msel=[[startrow,endrow],[startcol,endcolcol2]]
var funcfalse=function(){console.log('selsta');} // disable IE text selection
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){              // utility function to get cell position of o
    var r=getpos(o,1)[0].slice(0);r.sort();
    var c=       msel[1].slice(0);c.sort();
    $trs=$('#table-1 tbody tr');
    $('td',$trs).removeClass('hi_td');
    $trs.slice(r[0],r[1]+1).each(function(){
        $('td',this).slice(c[0],c[1]+1).addClass('hi_td');})
    $("#table-1 thead tr th").removeClass('hi_th')
        .slice(c[0],c[1]+1).addClass('hi_th');
}             
var hover=function(ev){ if (mdown) modsel(this); }       // event function hover
var mo=function(ev){ mdown=(ev.type=='mousedown')?1:0;   // event function mouseuo/down
    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});

JSフィドル

編集 3: (行ヘッダー)

<th>各行の先頭に s を含めるように変更することもできます。それに応じて古いJSfiddleを変更しました。<th>各行に行送りが実際に存在するかどうかを認識しないため、このソリューションにはまだあまり満足していません。オフセットを手動で変更しました

    $trs.slice(r[0],r[1]+1).each(function(){
    $('td',this).slice(c[0],c[1]+1).addClass('hi_td');});

に

    $trs.slice(r[0],r[1]+1).each(function(){
    $('td',this).slice(c[0]-1,c[1]).addClass('hi_td');});

多分私はすぐにより良い解決策を見つけるでしょう。ただし、ここでは更新されたJSfiddleを見つけることができます。

編集 4: (9 列以上):

申し訳ありませんが、最初のバージョンを作成したときは少し怠惰でした。r配列とをソートして、行番号と列番号の最小値と最大値を決定しますc。残念ながら、'9' が '10' より大きいと仮定して、アルファベット順(デフォルト) の並べ替えを使用しました。次の行で JSfiddle を変更しました (数値の sort-callback-function を追加numsrt)。

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);

大きなテーブルでも機能するようになりました: JSfiddle

于 2013-08-01T08:37:56.413 に答える