javascript - 为表格中的多个单元格创建边框

Question

我使用下面的代码，每次都想为突出显示的单元格创建一个边框

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/

Answer 1

这就是您需要的:DEMO

屏幕截图:

CSS:

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

table{
    user-select:none;
    -webkit-user-select:none;
}

.hi_td.hi_top{
    border-top:5px solid yellow;
}

.hi_td.hi_bottom{
    border-bottom:5px solid yellow;
}

.hi_td.hi_left{
    border-left:5px solid yellow;
}

.hi_td.hi_right{
    border-right:5px solid yellow;
}

JS:

var mo = function (ev) {
    $('td').removeClass('hi_top hi_bottom hi_left hi_right');
    var allHighlighted = $('.hi_td');
    mdown = (ev.type == 'mousedown') ? 1 : 0;
    getpos(this, 1 - mdown);
    if (mdown) {
        modsel(this);
    }
    else{
        if(allHighlighted.length == 1){
            allHighlighted.addClass('hi_top hi_left hi_right hi_bottom');
        }
        else{
            allHighlighted.each(function(i, item){
                var index = $(item).index();
                console.log(index);
                if(!$(item).prev().hasClass('hi_td') && $(item).next().hasClass('hi_td')){
                     $(item).addClass('hi_left');
                }
                if(!$(item).next().hasClass('hi_td') && $(item).prev().hasClass('hi_td')){
                     $(item).addClass('hi_right');
                }
                if(!$(item).closest('tr').prev().find('td:nth-child(' + (index+1) + ')').hasClass('hi_td')){
                    $(item).addClass('hi_top');
                }
                if(!$(item).closest('tr').next().find('td:nth-child(' + (index+1) + ')').hasClass('hi_td')){
                    $(item).addClass('hi_bottom');
                }

            });
        }
    }
}