简体   繁体   English

如果表行为空,如何隐藏div?

[英]How to hide div if table row is empty?

I have a table on my page and I want to display a message telling the user that they need to create content before the table is visible. 我的页面上有一个表格,我想显示一条消息,告诉用户他们需要在表格可见之前创建内容。

Currently when the table is empty the user can still see the table headings (article, date added etc). 当前,当表格为空时,用户仍然可以看到表格标题(文章,添加日期等)。

Using Jquery how would I hide the table and the div containing the table? 使用jQuery,我将如何隐藏表格和包含表格的div?

Do you know what I mean? 你懂我的意思吗?

Like this: 像这样:

$('table:not(:has(ContentSelector))').each(function() { 
    //This code will run for each empty table.
    //`this` will be the <table> element
});

Where ContentSelector is a selector that matches the content in the table. 其中ContentSelector是与表中的内容匹配的选择器。

是否可以隐藏一个空<div id="text_translate"><p>我刚开始学习 JavaScript 和 HTML5 的基础知识。 我正在尝试创建一个食谱应用程序,用户可以在其中添加食谱。 这些配方存储在一个数组中,并通过一个带有 for 循环的表循环。 用户还可以编辑表格。 主要功能之一应该是当表格的一行为空时,它会自动被删除。 我尝试使用display: none和 CSS,但它不起作用。 这是我的 CSS 表: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> form.addEventListener("submit", function (event) { let titleRow = table.insertRow(); let stepsRow = table.insertRow(); let titleCell = titleRow.insertCell(); let stepsCell = stepsRow.insertCell(); titleCell.innerHTML = inputTitle.value; stepsCell.innerHTML = inputSteps.value; titleCell.contentEditable = true; stepsCell.contentEditable = true; inputTitle.value = inputTitle.defaultValue; inputSteps.value = inputSteps.defaultValue; }, false);</pre><pre class="snippet-code-css lang-css prettyprint-override"> td: empty { display: none; } tr: empty { display: none; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;form id="form"&gt; &lt;label&gt;Insert Recipe: &lt;/label&gt; &lt;textarea id = "inputTitle" rows="1" cols="50" placeholder="Recipe Title"&gt;&lt;/textarea&gt; &lt;textarea id = "inputSteps" rows = "5" cols = "50" placeholder="Recipe Steps"&gt;&lt;/textarea&gt; &lt;button type="submit"&gt;Add Recipe&lt;/button&gt; &lt;/form&gt; &lt;table id = "table"&gt;&lt;/table&gt;</pre></div></div><p></p><p> table元素指的是 HTML5 表, inputTitle指的是一个textarea , inputSteps指的是不同的textarea 。</p><p> 我的 JavaScript 可能有错误。</p><p> 提前致谢!</p></div>CSS 的行?<table> </table> - Is it possible to hide an empty <table> row with CSS?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如果子DIV为空,则显示/隐藏表行 - Show/hide table row if a child DIV is empty 如何隐藏整个 <div> 如果表 <td> 标签是空还是空? - How to hide a whole a <div> if table <td> tag is is empty or null? 如何通过Java脚本隐藏div和表行下的文本 - How to hide text under div and table row by java script 如果可观察对象为空,如何隐藏 div - How to hide a div if an observable is empty 如果字段为空,如何隐藏一行? - How to hide a row if a field is empty? 当另一个div为空时如何隐藏div - How to hide a div when another div is empty 是否可以隐藏一个空<div id="text_translate"><p>我刚开始学习 JavaScript 和 HTML5 的基础知识。 我正在尝试创建一个食谱应用程序,用户可以在其中添加食谱。 这些配方存储在一个数组中,并通过一个带有 for 循环的表循环。 用户还可以编辑表格。 主要功能之一应该是当表格的一行为空时,它会自动被删除。 我尝试使用display: none和 CSS,但它不起作用。 这是我的 CSS 表: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> form.addEventListener("submit", function (event) { let titleRow = table.insertRow(); let stepsRow = table.insertRow(); let titleCell = titleRow.insertCell(); let stepsCell = stepsRow.insertCell(); titleCell.innerHTML = inputTitle.value; stepsCell.innerHTML = inputSteps.value; titleCell.contentEditable = true; stepsCell.contentEditable = true; inputTitle.value = inputTitle.defaultValue; inputSteps.value = inputSteps.defaultValue; }, false);</pre><pre class="snippet-code-css lang-css prettyprint-override"> td: empty { display: none; } tr: empty { display: none; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;form id="form"&gt; &lt;label&gt;Insert Recipe: &lt;/label&gt; &lt;textarea id = "inputTitle" rows="1" cols="50" placeholder="Recipe Title"&gt;&lt;/textarea&gt; &lt;textarea id = "inputSteps" rows = "5" cols = "50" placeholder="Recipe Steps"&gt;&lt;/textarea&gt; &lt;button type="submit"&gt;Add Recipe&lt;/button&gt; &lt;/form&gt; &lt;table id = "table"&gt;&lt;/table&gt;</pre></div></div><p></p><p> table元素指的是 HTML5 表, inputTitle指的是一个textarea , inputSteps指的是不同的textarea 。</p><p> 我的 JavaScript 可能有错误。</p><p> 提前致谢!</p></div>CSS 的行?<table> </table> - Is it possible to hide an empty <table> row with CSS? 如果所有列都为空,则删除/隐藏表行 - Remove/ hide table row if all columns are empty 如果表格只有 1 行,如何隐藏包含整个表格的 div? - How do I hide a div containing an entire table if table only has 1 row? Javascript:如果内部标签为空,如何隐藏div - Javascript: How to hide div if Label inside is empty
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM