Question

我使用以下代码，并希望每次为突出显示的单元格创建边框

HTML code：

<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

您只需添加css规则，例如

.hi_td {background-color:red; border: 1px solid #000;}
.hi_th {background-color:#fcc; border: 1px solid #000; }

每次突出显示表格单元格时都会创建边框。

Answer 2

这就是您所需要的：DEMO

抓屏：

enter image description here

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

            });
        }
    }
}

Answer 3

DEMO

.hi_td {background-color:red; border:2px solid yellow;}
.hi_th {background-color:#fcc; border:2px solid yellow;}

Answer 4

$("table th").css({
    border:"1px solid black"
});

$("table thead tr th").first().css({
    border: "none"
});

删除所有JS并添加它。

Answer 5

如果您在modsel功能中添加代码，那么边框将会随着选择的更新而添加，我发布了我想出的解决方案，只是为了好玩：

<强> Demo fiddle

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

}

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

5 个答案: