在给定行索引和表 ID 的情况下隐藏/取消隐藏表行

Hide/unhide table row given the row index and table ID

本文关键字：隐藏 情况下 取消 ID 索引      更新时间：2023-09-26

目前我有以下代码来删除表行：

var remove = document.getElementById(dataID); (this is the id of an object in the row I wish to hide)
    if(remove!=null){
        var v = remove.parentNode.parentNode.rowIndex;
        document.getElementById(tid).deleteRow(v); (tid is the table id, not the row id)
    }

但是，我只想隐藏它，而不是删除它。有什么好方法可以做到这一点？

另外，将来，我将要根据用户请求"取消隐藏"它，那么如何检查它是否已被隐藏？if（remove！=null） 是检查是否已经删除了一行的内容，所以我需要类似的东西。

谢谢你的时间。

document.getElementById(tid).children[dataID].style.display = 'none';

您可能需要-1 dataID

block再次显示它（或inline或任何它最初是什么，div它是block）。

JQuery：

$('#'+tid+':nth-child('+dataID+')').hide();

我自己的方法，在普通的JavaScript中：

function toggleRow(settings) {
    // if there's no settings, we can do nothing, so return false:
    if (!settings) {
        return false;
    }
    // otherwise, if we have an origin,
    // and that origin has a nodeType of 1 (so is an element-node):
    else if (settings.origin && settings.origin.nodeType) {
        // moving up through the ancestors of the origin, until
        // we find a 'tr' element-node:
        while (settings.origin.tagName.toLowerCase() !== 'tr') {
            settings.origin = settings.origin.parentNode;
    }
        // if that tr element-node is hidden, we show it,
        // otherwise we hide it:
        settings.origin.style.display = settings.origin.style.display == 'none' ? 'table-row' : 'none';
    }
    // a simple test to see if we have an array, in the settings.arrayOf object,
    // and that we have a relevant table to act upon:
    else if ('join' in settings.arrayOf && settings.table) {
        // iterate through that array:
        for (var i = 0, len = settings.arrayOf.length; i < len; i++) {
            // toggle the rows, of the indices supplied:
            toggleRow({
                origin: table.getElementsByTagName('tr')[parseInt(settings.arrayOf[i], 10)]
            });
        }
    }
}
// you need an up-to-date browser (you could use 'document.getElementById()',
// but I'm also using 'addEventListener()', so it makes little difference:
var table = document.querySelector('#demo'),
    button = document.querySelector('#toggle');
// binding a click event-handler to the 'table' element-node:
table.addEventListener('click', function (e) {
// caching the e.target node:
var t = e.target;
    // making sure the element is a button, and has the class 'removeRow':
    if (t.tagName.toLowerCase() === 'button' && t.classList.contains('removeRow')) {
        // calling the function, setting the 'origin' property of the object:
        toggleRow({
            origin: t
        });
    }
});
// binding click-handler to the button:
button.addEventListener('click', function () {
    // calling the function, setting the 'arrayOf' and 'table' properties:
    toggleRow({
        'arrayOf': document.querySelector('#input').value.split(/'s+/) || false,
            'table': table
    });
});

JS小提琴演示。

引用：

  • document.querySelector() .
  • e.target.addEventListener() .
  • Node.nodeType .
  • String.split() .

正如你要求一个jQuery解决方案...怎么样

var $remove = $('#' + dataID);
if ($remove) {
    $remove.closest('tr').closest().hide();
}

？

相关文章：