单击 HTML 个元素更改数据属性

Question

我正在尝试在单击 <tr> 时将更改应用到 DOM。单击时，应将 data-state=enabled 和 data-display=expanded 添加到单击的 <tr>，同时将 data-state=disabled 和 data-display=collapsed 应用到 每个其他 <tr>.

所以看起来应该是突出显示单击的行，同时禁用其他行。

然后，当一行被突出显示，并且用户在其他地方单击时，它应该重置为默认值，即 data-state=enabled 和 data-display=collapsed 所有 <tr>的

目前，我让它工作，因此当单击 <tr> 时，该行会突出显示并禁用所有其他行。但是，脚本缺少重置为默认设置，因为如果单击另一个 <tr>，它会立即突出显示那个并禁用其余的。

我想在 vanilla 中这样做 javascript 但我也愿意使用 jQuery 如果它更容易并且不会显着影响性能。

这是带有工作代码的 JSbin，可以查看它的位置： https://jsbin.com/kirati/

到目前为止的代码：

<table class="table">
                    <thead>
                        <tr>
                            <th class="sort-key asc"><a href="#">Pet Name </a></th>
                            <th><a href="#">Owner (Last, First)</a></th>
                            <th><a href="#">Species</a></th>
                            <th><a href="#">Breed</a></th>
                            <th><a href="#">ID</a></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                Fluffy
                                <div class="table-row__expanded-content">
                                    <data-key>Sex: </data-key> <data-value>Male</data-value><br />
                                    <data-key>DOB: </data-key> <data-value>12/08/2010</data-value> <br />
                                    <data-key>Weight: </data-key> <data-value>20 lbs</data-value> <br />
                                    <data-key>Location: </data-key> <data-value>Kennel 2B</data-value> <br />
                                    <data-key>Temperament: </data-key> <data-value>Aggresive</data-value> <br />
                                    <data-key>Allergies: </data-key> <data-value>Sulfa, Penicillin, Peanuts</data-value>
                                </div>
                            </td>
                            <td>Anderson, James</td>
                            <td>Dog</td>
                            <td>Bulldog-Shitzu</td>
                            <td>ABCDE1234567</td>
                        </tr>
                        <tr>
                            <td>Feather</td>
                            <td>Michelle Charlotte, <br /> Angel Vanessa</td>
                            <td>Cat</td>
                            <td>American Bobtail</td>
                            <td>FGHIJ1234567</td>
                        </tr>
                        <tr>
                            <td>Fluffer-Nutter</td>
                            <td>Rakerstraw, Rickey</td>
                            <td>Dog</td>
                            <td>American Eskimo</td>
                            <td>KLMNO1234567</td>
                        </tr>
                        <tr>
                            <td>Farley</td>
                            <td>Cunningham, Stephanie</td>
                            <td>Dog</td>
                            <td>Pomeranian</td>
                            <td>PQRST1234567</td>
                        </tr>
                        <tr>
                            <td>Fuzzy</td>
                            <td>Venice, Harding</td>
                            <td>Cat</td>
                            <td>Burmese</td>
                            <td>UVWXY1234567</td>
                        </tr>
                        <tr class="alphabet-label">

                            <td>G</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Goldie</td>
                            <td>Cherilyn, Mitchener</td>
                            <td>Dog</td>
                            <td>Chihuahua-Maltese</td>
                            <td>ZABCD1234567</td>
                        </tr>
                    </tbody>
                </table>

和 Javascript

window.onload = function () {

    var tablerow = document.body.getElementsByTagName('tr');
    console.log(tablerow);

     // Convert the HTMLCollection into a true javascript Array, so we can do "stuff" with it       
    var tablerowArr = Array.prototype.slice.call(tablerow);
    console.log(tablerowArr);

// Do stuff
    tablerowArr.forEach(function (value, i) {
        console.log(i, value);

        tablerow[i].onclick = function (e) {
            //console.log("clicked!");


            var newArr = tablerowArr.slice(i, i + 1);
            //console.log(tablerow);
            console.log(i);
            //console.log(tablerowArr);
            console.log('newArr', newArr);


            tablerowArr.forEach(function (value, i) {

                // first reset all instances of data-XXX  
                tablerowArr[i].setAttribute('data-display', "collapsed");
               // tablerowArr[i].setAttribute('data-state', "enabled");

                // Set the <tr> data-display attribute to expanded/collapsed on click
                newArr[0].setAttribute('data-display', tablerowArr[i].getAttribute('data-display') === "collapsed" ? "expanded" : "collapsed");
                //tablerowArr[i].setAttribute('data-display', tablerowArr[i].getAttribute('data-display') === "collapsed" ? "expanded" : "collapsed");

                // Set the <tr> data-state attribute to enabled/disabled on click
                newArr[0].setAttribute('data-state', newArr[0].getAttribute('data-state') === "disabled" ? "enabled" : "enabled");
                tablerowArr[i].setAttribute('data-state', newArr[0].getAttribute('data-state') === "enabled" ? "disabled" : "enabled");

            });

            e.preventDefault();
        };
    });
};

Answer 1

在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 2

这是下面 jsfiddle 中的纯 javascript 示例：

http://jsfiddle.net/pya9jzxm/14

    var tbody = document.querySelector('tbody');
    var trs = tbody.querySelectorAll('tr');
    var tr, index = 0, length = trs.length;
    for (; index < length; index++) {
        tr = trs[index];
        tr.setAttribute('data-state', 'enabled');
        tr.setAttribute('data-display', 'collapsed');
        tr.addEventListener('click',
            function () {
                if (this.classList.contains('alphabet-label')) {
                    return;
                }
                var trIndex = 0, trLength = trs.length, hasExpanded = false;
                var state = 'disabled';
                if (tbody.querySelectorAll('[data-display="expanded"]').length > 0) {
                    hasExpanded = true;
                    state = 'enabled';
                }
                for (; trIndex < trLength; trIndex++) {
                    trs[trIndex].setAttribute('data-state', state);
                    trs[trIndex].setAttribute('data-display', 'collapsed');
                }
                if (!hasExpanded) {
                    this.setAttribute('data-state', 'enabled');
                    this.setAttribute('data-display', 'expanded');
                }
            }
        );
    }
};

Answer 3

使用原始 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 在你说这不起作用之前。我已经亲自测试过了。

我可以建议您改为修改 class... 以更改效果。

$(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 个元素更改数据属性

Change data-attribute on click of HTML elements

javascript

jquery

html

custom-data-attribute

htmlcollection