Question

我的出发点是第一个图像，从用户的角度来看有三个表，但它是作为单个html表实现的： Original, table columns aligned

它看起来很好，但我想添加一个Javascript函数，只能显示第一个表（MusicBrainz找到潜在的版本）并隐藏其他两个。我的计划是对其进行编码，以便在外表中实际存在三个表，然后在每个表上设置一个id属性并编写函数，找到具有所述id的元素并设置display：none / table row

所以我继续使用html chnages，现在有了这个：

Modification, table columns not aligned

问题是因为它们现在是三个独立的html表，每个表的列宽度彼此不对齐，因为每个表都考虑自己的数据来计算出使用可用屏幕宽度的最佳方式，现在看起来很麻烦。

所以看起来我有两种替代方法但是没有解决方案

保持表内的表格方法，并以某种方式将表格列相互对齐。
恢复原始设计并使用其他方法隐藏特定行，我正在考虑使用<divs)，但据我了解，您不能直接拥有<div>在表元素之后，即这是无效的

` ... ...
```
   <div id="2">
     
     <tr><td>...</td></tr></div>
     <tr><td>...</td></tr></div>
   </div>

   <div id="3">
     
     <tr><td>...</td></tr></div>
     <tr><td>...</td></tr></div>
   </div>
</table>
```
`

根据Ulrichs回答更新

HTML 的

<input type="submit" onclick="return togglePotentialMatchesLinks()">

<!--Soft Linked:Start-->
<tbody class="releasegroupingpotential" >
<tr>
<th class="releasetableheading_action" colspan="18" >MusicBrainz Releases where potential links to Discogs have been found</th>
</tr>
<tr>
<th class="releasetableheading_action" >Actions</th>
<th class="releasetableheading_year" >Year</th>
<th class="releasetableheading_title" >Title</th>

的CSS

.releasegroupingpotential {
    width:100%;
}

的Javascript

function togglePotentialMatchesLinks()
{
    var els = document.getElementsByClassName("releasegroupingpotential");
    var e;
    alert("No of Elements found is:"+els.length);
    for(e in els)
    {
        e.style.display = e.style.display=="none"
                ?"table-row-group"
                :"none";
    }
    return true;
}

当我点击按钮时，Javascript中的警告显示：

找到的元素数量为：1

所以它被召唤但是tbody并没有消失:(

Answer 1

我的想法是在你的表中有三个<tbody></tbody>s并给它们ID并定位它们，因为它似乎你想要以一组行为目标。

模糊的例子：

＆＃13;

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tbody >
	<tr><td>row 1</td></tr>
      </tbody>
      <tbody id="hideme">
	<tr><td>row 2</td></tr>
      </tbody>
      <tbody>
	<tr><td>row 3</td></tr>
      </tbody>
      </table>
    <a href="#" onclick="document.getElementById('hideme').style.display='none'">hide middle</a>
  </body>
</html>

＆＃13;

Answer 2

如果我理解了这个问题，您可以将mDrawerToggle = new ActionBarDrawerToggle( this, /* Our context (Activity that hosts this drawer) */ mDrawerLayout, /* The DrawerLayout where the nav drawer will be drawn */ mAppBar, /* The Toolbar that is being used as an app bar. */ R.string.drawer_open, /* Description of "open drawer", for accessibility */ R.string.drawer_close /* Description of "close drawer", for accessibility */ ) { /** * Called when a drawer has settled in a completely closed state. */ public void onDrawerClosed(View view) { super.onDrawerClosed(view); supportInvalidateOptionsMenu(); } /** * Called when a drawer has settled in a completely open state. */ public void onDrawerOpened(View drawerView) { super.onDrawerOpened(drawerView); supportInvalidateOptionsMenu(); } };添加到width或td，这样您的colunms将具有相同的宽度。你可以用html或css来做。 E.g。

th

如何将div与子表一起使用来隐藏数据

2 个答案: