Javascript display = 'блок'

Question

У меня есть код, который показывает строку таблицы, когда что-то нажимается.Итак, у строки отключен атрибут стиля, см. Ниже:

HTML

<tr id='Asset' class='rrtr' style='display:none;'>

Пользователь щелкает и запускает Javascript, который отлично работает:

Javascript

document.getElementById("Asset").style.display = 'block';

Однако стиль строки не соответствует отдыху, даже если его атрибуты класса установлены в 'rrtr', как и остальные.

Если я выключу 'display: none;'в строке и запустите его, показывая, формат в порядке.

Есть идеи?

Answer 1

Для лучшей совместимости установите

document.getElementById("Asset").style.display = '';

Internet Explorer 7 и ниже не поддерживает table-row в качестве значения для display. В качестве альтернативы - и, возможно, лучшая идея - установить класс для строки и удалить / изменить его с помощью JS:

<tr id='Asset' class='rrtr rrtr-hidden'>
<!-- .rrtr-hidden { display: none; } -->

// Remove class `.rrtr-hidden`
document.getElementById("Asset").className = 'rrtr';

Answer 2

Вместо block вы должны установить отображаемое значение на table-row.

Answer 3

установите table-row или ""

Answer 4

Я скрываю и показываю строки таблицы, добавляя / удаляя имя класса с именем 'hide'.Преимущество этого подхода заключается в возможности скрывать / показывать любой элемент, не зная и не заботясь о его обычном стиле отображения.Со строками таблицы это, вероятно, не проблема, но с другими элементами вы можете однажды захотеть изменить, например, с block на inline.Если вы используете класс для сокрытия элементов, вам не нужно менять свой javascript.

В вашем CSS:

.hide {
   display:none;
}

И в javascript,

function hasClass(ele, cls) {
    if( ele != null && ele.className != null ) {
      return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    } else {
      return false;
    }
}

function addClass(ele, cls) {
    if (! hasClass(ele, cls)) {
      ele.className += " " + cls;
    }
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, '');
    }
}

Это JS пришел от кого-то еще на SO, но, к сожалению, я забыл сохранить ссылку.

Таким образом, чтобы скрыть элемент addClass( document.getElementById('Asset'), 'hide' ) и removeClass, чтобы показать его.

РЕДАКТИРОВАТЬ : я как-то пропустил ответ Энди.По сути, он делает то же самое, однако эти методы addClass и removeClass немного более надежны, чем изменение element.className «вручную».