突出显示选定的表格行

时间:2015-10-16 02:59:58

标签: javascript jquery css jquery-ui

我在拖放功能中实现某些功能时遇到问题。到目前为止,可拖动和可排序是可以的。现在问题是我试图突出显示所选行并使用按钮将其删除。

我有两个表:A类和类UI。我设法突出显示from operator import add half_split = np.array_split(input, 2) res = map(lambda x: np.array_split(x, 2, axis=1), half_split) res = reduce(add, res) 表类A.但是在表类UI中我不能突出显示tr

这是我的jsfiddle

我真的很感谢你的帮助。

2 个答案:

答案 0 :(得分:2)

您的代码和CSS存在几个问题:

第一个问题 - 您的test2 CSS选择器仅设置为在具有A类的表下工作:

您的代码:

.A tbody tr.test2 td {
    background: rgba(20, 111, 186, 0.38);
}

我的修复,是通用的:

tbody tr.test2 td {
    background: rgba(20, 111, 186, 0.38);
}

下一期,您的点击从未在第二张桌子上调用过: 你的代码(仅在带有ID图的表下):

$('#diagram tbody tr').click(function(e) {
    $('#diagram tbody tr').not(this).removeClass('test2');
    $(this).toggleClass('test2');
});

我的代码(所有表的事件委托):

$('tbody').on("click","tr",function(e) {
    $('tbody tr').not(this).removeClass('test2');
    $(this).toggleClass('test2');
});

工作小提琴: http://jsfiddle.net/jwb7vy9L/9/

与删除工作小提琴:

$("#button1").on("click",function(e){
    $("table:not(.A) .test2").remove();
});

http://jsfiddle.net/jwb7vy9L/14/

答案 1 :(得分:0)

你想控制表分开吗?也许这directive guide可以帮助你

HTML

<table class="A" id="diagram">
    <tbody id="sortable2">
   <tr class="new-item"> 
       <td>1</td>
   </tr>
   <tr class="new-item"> 
       <td>2</td>
   </tr>
   <tr class="new-item"> 
       <td>3</td>
   </tr>
    </tbody>
</table>


<br><br>

<table class="UI" id="diagram1" >
    <tbody id="sortable">

     </tbody>
</table>

 <br><br>   

<button id="button1">Clear selected row in Table class UI</button>

的javascript

test();

$("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
        if (ui.item.hasClass("new-item")) {
            // This is a new item

        }
    }
});
$(".new-item").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid",
    stop: function( event, ui ) {
        test();
    },
    zIndex: 10000
});

/** Highlight Statement **/
function test(){
    $('#diagram tbody tr').unbind('click').bind('click',function(e) {
        $('#diagram tbody tr').not(this).removeClass('test2');
        $(this).toggleClass('test2');
    });

    $('#diagram1 tbody tr').unbind('click').bind('click',function(e) {
        $('#diagram1 tbody tr').not(this).removeClass('test2');
        $(this).toggleClass('test2');
    });
}

CSS

table{
    border: 1px solid black;
    width:200px;
}

tbody tr.test2 td {
    background: rgba(20, 111, 186, 0.38);
}