CODEWITHSUNDEEP
javascriptjquery
User9975
User9975

Reputation: 37

Create a border for several cell in a table

I use the following code and want to create a border for the highlighted cells for each time

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

How to Solve this? See this:http://jsfiddle.net/RmAqP/9/

Upvotes: 1

Views: 139

Answers (5)

omma2289
omma2289

Reputation: 54639

If you add the code inside the modsel function then the border will be added as the selection is updated, I'm posting the solution I came up with just for fun:

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

}

Upvotes: 0

AdityaSaxena
AdityaSaxena

Reputation: 2157

This is what you need : DEMO

Screencapture:

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

            });
        }
    }
}

Upvotes: 1

YeJiabin
YeJiabin

Reputation: 1038

You can just add your css rule, e.g.

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

It will create a border every time you highlight the table cell.

Upvotes: 1

Swaroop Nagendra
Swaroop Nagendra

Reputation: 605

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

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

Remove every your JS and add this.

Upvotes: 0

AdityaSaxena
AdityaSaxena

Reputation: 2157

DEMO

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

Upvotes: 0

Related Questions