Question

我在点击plot(cars) # writes data to device, # it's possible to execute `dev.print(png, ...)` here and # get valid picture lines(lowess(cars)) # updates current device, # it's also possible to execute `dev.print(...)` and get valid picture plot(sin, -pi, 2*pi) # writes data to new device, # it's possible to execute `dev.print(...)` and # get valid picture for second plot and # execute `dev.copy(...)` and get valid picture for the first plot时尝试对DOM应用更改。点击后，应将<tr>和data-state=enabled添加到点击的data-display=expanded，同时将<tr>和data-state=disabled添加到其他 {{ 1}}。

因此，在禁用其他行时，应该突出显示单击的行。

然后，当某行突出显示，并且用户点击其他地方时，它应该重置为默认，即所有data-display=collapsed的{{1}}和<tr>小号

目前，我使用它，以便在单击data-state=enabled时突出显示该行，并禁用所有其他行。但是，该脚本缺少重置为默认值，因为如果点击了另一个data-display=collapsed，则会立即突出显示该值并禁用其余内容。

我想在vanilla javascript中执行此操作，但如果它更容易并且不会明显影响性能，我也愿意使用jQuery。

这是带有工作代码的JSbin，看看它在哪里： https://jsbin.com/kirati/

到目前为止的代码：

<tr>

和Javascript

<tr>

Answer 1

以下是jsfiddle中的纯javascript示例：

http://jsfiddle.net/pya9jzxm/14

ExpandableListView

Answer 2

在jQuery中：

$(function() {
    $('html').click(function() {
        /* return to default state */
        $('.table tbody tr').data('state', 'enabled').data('display', 'expanded');
    });
    $('.table tbody tr').on('click', function(e) {
        /* stop the html click event */
        e.stopPropagation();
        /* set attributes for all rows */
        $('.table tbody tr').data('state', 'disabled').data('display', 'collapsed');
        /* set attributes for the clicked row */
        $(this).data('state', 'enabled').data('display', 'expanded');
    });
});

我评论了这个功能，以澄清它的工作原理。

Answer 3

使用vanilla JS和事件委托。 DEMO

var tablerow = document.body.getElementsByTagName('tr');
// Convert the HTMLCollection into a true javascript Array, so we can do "stuff" with it       
var tablerowArr = Array.prototype.slice.call(tablerow);
// store the highlighted row
var highlighted;

// extracted function to enable/disable rows
var enable = function(row){
    row.setAttribute('data-display', "expanded");
    row.setAttribute('data-state', "enabled");
}
var disable = function( row ){
    row.setAttribute('data-display', "collapsed");
    row.setAttribute('data-state', "disabled");
}
// on click anywhere
document.body.addEventListener('click', function(e){
    var target = e.target;
    // check if event target or any of its parents is a TR
    while( target.parentNode && target.nodeName.toLowerCase() != 'tr' ){
        target = target.parentNode;   
    }
    // if s row was higlighted disable all rows
    if( highlighted ){
        tablerowArr.forEach(  disable );
        // and remove the reference to highlighted
        highlighted = null;
    }
    // no row is highlighted
    else {
        tablerowArr.forEach( function(row){
            // if the event target is a row, highlight it
            if(row == target) {
                enable( row );
                // and store it as the currently highlighted
                highlighted = row;
            }
            // if it's not the event target then disable
            else {
                disable( row ); 
            }
        });
    }
});

Answer 4

与@LinkinTED非常相似

在您说这不起作用之前请检查HTML。我已经自己测试了。

我建议您改为修改类......来改变效果。

$(function() {

    var $row = $('.table tbody tr');

    $('html').click(function() {
        $row.attr('state', 'enabled').attr('display', 'expanded');
    });

    $row.on('click', function(e) {
        e.stopPropagation();
        $row
          .attr('state', 'disabled')
          .attr('display', 'collapsed');

      //console.log(e);

        $(this)
          .attr('state', 'enabled')
          .attr('display', 'expanded');
    });
});

点击HTML元素更改数据属性

4 个答案: