1

次のコードを使用し、強調表示されたセルの境界線を毎回作成したい

HTML コード:

<table id="table-1">
<thead>
    <tr>
        <th></th>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
        <th>Col4</th>
        <th>Col5</th>
        <th>Col6</th>
        <th>Col7</th>
        <th>Col8</th>
        <th>Col9</th>
        <th>Col10</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>Row1</th>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <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>
        <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>
        <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>
        <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>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
    </tr>
    <tr>
        <th>Row6</th>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
    </tr>
    <tr>
        <th>Row7</th>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
    </tr>
    <tr>
        <th>Row8</th>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
    </tr>
    <tr>
        <th>Row9</th>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
    </tr>
    <tr>
        <th>Row10</th>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <td>info</td>
        <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
});

これを解決するには？これを参照してください：http://jsfiddle.net/RmAqP/9/

4

5 に答える 5

0

関数内にコードを追加するmodselと、選択が更新されると境界線が追加されます。楽しみのために思いついたソリューションを投稿しています。

デモフィドル

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

    //BORDER STUFF
    $('td').removeClass('hi_top hi_bottom hi_left hi_right hi_all');
    if($('.hi_td').length == 1)
        $('.hi_td').addClass('hi_all')
    else{
        var cols = $("#table-1 thead tr th.hi_th").length;
        var rows  = $("#table-1 tbody tr th.hi_th").length;
        var selectedCells = $('.hi_td');
        selectedCells.filter(function(i){return i%cols == 0}).addClass('hi_left');
        selectedCells.filter(function(i){return i < cols}).addClass('hi_top');
        selectedCells.filter(function(i){return i > cols * (rows - 1) -1 }).addClass('hi_bottom');
        selectedCells.filter(function(i){return i % (cols) == cols-1 }).addClass('hi_right');
    }

}
于 2013-08-20T06:58:11.283 に答える
0

デモ

.hi_td {background-color:red; border:2px solid yellow;}
.hi_th {background-color:#fcc; border:2px solid yellow;}
于 2013-08-20T05:49:54.377 に答える