Скрыть или отобразить кнопку в соответствии с количеством строк таблицы

У меня есть таблица HTML и кнопка отправки.Скрыть или отобразить кнопку в соответствии с количеством строк таблицы

Прежде всего, кнопка отправки должна иметь этот стиль: style.display="none".

Но если таблица имеет хотя бы одну строку, то должна отображаться кнопка (block/inline);

Я до сих пор не знаю, как установить связь между столом и кнопкой. Я пытаюсь использовать JavaScript, но я должен подумать о функции, и я не нашел ее для применения в таблице типов. Думать о CSS все еще сложно, так как я не могу найти связь между таблицей и кнопкой.

источник

2010-06-16 kawtousse

Как таблица заполняется рядами? Использование Javascript? Некоторые серверные технологии (укажите, если они)? – bezmax

Вам нужно будет переключать видимость кнопки при настройке таблицы. Поскольку это можно сделать по-разному, нет способа узнать, что подходит вам.

Для простоты, give jQuery a try. Я сделаю доступ к элементам и модифицирую стили намного проще, чем «ванильный» JavaScript. Также убедитесь, что если вы обновляете таблицу после загрузки страницы (через JavaScript), вы используете ее всякий раз, когда вы это делаете.

$(document).ready(function(){ 
    if ($("#table > tr").length > 0) 
     $("#button").show(); 
    else 
     $("#button").hide(); 
});

Я надеюсь, что это поможет.

источник

2010-06-16 13:48:31 Lance

Это не обычный ванильный JavaScript. Это jQuery. ОП может попытаться использовать это напрямую, и это не сработает. – 2010-06-16 13:53:48

Извините. У меня это было включено в пост-редактирование. Я предлагаю использовать jQuery и просто упростить доступ к элементам и модификацию стиля. Думаю, я слишком много удалил? Я отредактирую назад. Спасибо за хедз-ап! – Lance

какой именно ОП точно – kawtousse

Если кнопка находится внутри TD, который он наиболее определен. делает то просто получить доступ к нему через:

td input { 
    display: none; 
}

Вы даже можете определить Stlye с передовым селектором, как это в CSS3

input[type="button"] { 
    display: none; 
}

Я писал об этом в моих blog.

С JavaScript вы можете захватить поле ввода с

var myInput = document.getElementsByTagName('input'); 
myInput.style.display = none;

Чтобы выбрать вход внутри тра, использовать что-то вроде

myTableRow.childNodes[0];

источник

2010-06-16 13:58:17 nottinhill

простых, не-Jquery эквивалента ответа Лэнса Мого будет что-то вроде этого:

var button = document.getElementById('the-button'); 
if (document.getElementById('the-table').getElementsByTagName('tr').length > 0){ 
    button.style.display = 'block'; 
}else{ 
    button.style.display = 'none'; 
}

источник

2010-06-16 14:00:10 tom

Ты мой герой, Том. ;) – Lance

-1

<html> 
<head> 
<title>whatever</title> 
<style type="text/css"> 
    .hidden { 
    display: none; 
    } 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() 
    { 
    var $t = $('table'); 
    var $h = $t.find('thead'); 
    var $b = $t.find('tbody'); 
    var $s = $('#send'); 

    // the "add" button appends a new row 
    // into the table body; if the body 
    // transitions from empty, the "send" 
    // button is displayed 
    $('#add').bind('click', function() 
    { 
    $b.append(newRow()); 
    if (1 == $b.find('tr').length) 
    $s.removeClass('hidden'); 
    }); 
    // the remove button removes the last 
    // row from the table body (if there's 
    // any); if the body transitions to 
    // empty, the "send" button is hidden 
    $('#remove').bind('click', function() 
    { 
    $b.find('tr:last').remove(); 
    if (0 == $b.find('tr').length) 
    $s.addClass('hidden'); 
    }); 
    // generates a table row; this demo 
    // impl. just copies the heading row 
    var newRow = function() 
    { 
    return $h.find('tr').clone(); 
    }; 
    }); 
</script> 
</head> 
<body> 
<table border="1"> 
    <thead> 
    <tr><td>foo</td><td>bar</td></tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 
<input type="button" id="add" value="add" /> 
<input type="button" id="remove" value="remove" /> 
<input type="button" id="send" value="send" class="hidden" /> 
</body> 
</html>

источник

2010-06-18 06:07:51

Скрыть или отобразить кнопку в соответствии с количеством строк таблицы

ответ

Смежные вопросы