Question

我有一个HTML表格和一个按钮发送。

首先，发送按钮必须具有以下样式：style.display="none"。

但如果表格至少有一行，则应显示该按钮（block / inline）;

我仍然不知道如何在表格和按钮之间建立联系。我尝试使用JavaScript，但我应该考虑一个函数，我没有找到任何适用于类型表。考虑到CSS仍然很难，因为我找不到表和按钮之间的关系。

Answer 1

调整表格时，您需要切换按钮的可见性。由于这可以通过多种方式完成，因此无法知道什么是适合您的。

为简单起见，give jQuery a try。我将比“vanilla”JavaScript更容易访问元素和修改样式。另外请确保如果您在页面加载后（通过JavaScript）更新表格，那么只要您这样做就使用它。

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

我希望有所帮助。

Answer 2

一个简单的，非jquery相当于Lance May的答案将是这样的：

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

Answer 3

如果按钮位于TD最内侧的TD内。然后只需通过以下方式访问它：

td input {
  display: none;
}

您甚至可以使用CSS3中的高级选择器定义stlye

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

我在blog写了这篇文章。

使用JavaScript，您可以使用

获取输入字段

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

要在tr中选择输入，请使用

之类的内容

myTableRow.childNodes[0];

Answer 4

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

根据表的行数隐藏或显示按钮

4 个答案: