为什么单击按钮时我的表格行没有出现？ [关闭]答案

【问题标题】：Why doesn't my table row appear when the button is clicked? [closed]为什么单击按钮时我的表格行没有出现？ [关闭]
【发布时间】：2022-01-28 06:23:15
【问题描述】：

只是想有一个新的下拉行来在表单上输入一些数据。应该很简单，但下拉菜单仅显示在第一个单元格中，即使使用 colspan=5。

或者有更好的方法吗？感谢您的帮助。

<table cellspacing=0 cellpadding=7 border=1>
  <tr bgcolor=#efefef>
    <td></td>
    <td>Date</td>
    <td>DATA</td>
    <td>MORE DATA</td>
    <td>Method</td>
  </tr>
  <tr>
    <td>
      <button onclick="javascript:showElement('abcdata')" style="padding:4px" class=verd8> SHOW NEW ROW </button>
    </td>
    <td>Jan 22, 2022</td>
    <td>SOME DATA</td>
    <td>SOME MORE</td>
    <td>BUTTONDROP</td>
  </tr>
  <tr id="abcdata" style="display:none;">
    <td colspan=5>
      SHOW NEW ROW ACROSS ALL CELLS : sfdgsdfgs hlahhfa la dfl dfljhsd flhsd flhsdf lhdsfh asf alhd a</td>
  </tr>

  <tr>
  <td colspan=5>
  ADDED THIS tr/td IN EDIT : NOTHING HIDDEN.... DOES IT SHOW ALL ACROSS?? YES IT DOES
  </td>
  </tr>

</table>

【问题讨论】：

您的单元格上有style="display:none;"。你能指望什么？也许如果你包含你的 JavaScript 函数，我们可以看到问题。
Javascript 在按钮中：通常支持显示元素，无需额外的 JS。我到处都用它。这可以显示 ROW...但它只显示在第一个单元格中而不是横跨全部 10. 火狐浏览器
@Merle_the_Pearl 问题出在showElement，我们无法为您提供帮助，因为我们不知道那是什么
showElement 不是浏览器中 Javascript 的本机部分。一个快速的谷歌搜索告诉我它很可能来自code.org's App Lab IDE 提供的库。如果没有这种环境，它就无法工作，它可能只适用于使用他们的库创建的元素。

标签： javascript css html-table tr

【解决方案1】：

好的，我不知道你从哪里得到showElement，但取消隐藏行的最简单方法是abcdata.style.display=''

<button onclick="abcdata.style.display=''"

<table cellspacing=0 cellpadding=7 border=1>
  <tr bgcolor=#efefef>
    <td></td>
    <td>Date</td>
    <td>DATA</td>
    <td>MORE DATA</td>
    <td>Method</td>
  </tr>
  <tr>
    <td>
      <button onclick="abcdata.style.display=''" style="padding:4px" class=verd8> SHOW NEW ROW </button>
    </td>
    <td>Jan 22, 2022</td>
    <td>SOME DATA</td>
    <td>SOME MORE</td>
    <td>BUTTONDROP</td>
  </tr>
  <tr id="abcdata" style="display:none;">
    <td colspan=5>
      SHOW NEW ROW ACROSS ALL CELLS : sfdgsdfgs hlahhfa la dfl dfljhsd flhsd flhsdf lhdsfh asf alhd a</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

function showElement(id) {
  document.getElementById(id).classList.remove('hidden');
}

.hidden {
  display: none;
}

<table cellspacing=0 cellpadding=7 border=1>
  <tr bgcolor=#efefef>
    <td></td>
    <td>Date</td>
    <td>DATA</td>
    <td>MORE DATA</td>
    <td>Method</td>
  </tr>
  <tr>
    <td>
      <button onclick="javascript:showElement('abcdata')" style="padding:4px" class=verd8> SHOW NEW ROW </button>
    </td>
    <td>Jan 22, 2022</td>
    <td>SOME DATA</td>
    <td>SOME MORE</td>
    <td>BUTTONDROP</td>
  </tr>
  <tr id="abcdata" class="hidden" >
    <td colspan=5>
      SHOW NEW ROW ACROSS ALL CELLS : sfdgsdfgs hlahhfa la dfl dfljhsd flhsd flhsdf lhdsfh asf alhd a</td>
  </tr>
</table>

我没有看到你的代码，但我猜你使用 display: block 来显示 td。

我建议你添加一个叫做隐藏的css类。

将其添加到要隐藏的元素中。

当你想显示元素时，移除它。

附：我不建议通过 JS 更改特定属性（如果没有必要）。

【讨论】：

仍然只显示在第一个单元格中...不跨越所有单元格作为新的干净行。

【解决方案3】：

您似乎在暗示 showElement() 是一个原生 JavaScript 函数。它不是。如果我们添加该功能，您的代码就可以工作。

我的猜测是，您习惯于从事一些实用功能由另一个脚本或库提供的项目。

<script>
  function showElement(id) {
    document.getElementById(id).style.display = 'table-row'; 
    // or just '' to make it more generic
  }
</script>

<table cellspacing=0 cellpadding=7 border=1>
  <tr bgcolor=#efefef>
    <td></td>
    <td>Date</td>
    <td>DATA</td>
    <td>MORE DATA</td>
    <td>Method</td>
  </tr>
  <tr>
    <td>
      <button onclick="javascript:showElement('abcdata')" style="padding:4px" class=verd8> SHOW NEW ROW </button>
    </td>
    <td>Jan 22, 2022</td>
    <td>SOME DATA</td>
    <td>SOME MORE</td>
    <td>BUTTONDROP</td>
  </tr>
  <tr id="abcdata" style="display:none;">
    <td colspan=5>
      SHOW NEW ROW ACROSS ALL CELLS : sfdgsdfgs hlahhfa la dfl dfljhsd flhsd flhsdf lhdsfh asf alhd a</td>
  </tr>
</table>

【讨论】：