html-table 相关问题

有没有办法从数据库填充 HTML 表？ （SQL、VB、ASP.NET、）

我在我的 asp 门户网站中有一个基本的 HTML 表格设置， ... 我的 asp 门户网站中有一个基本的 HTML 表格设置， <table ID="MasterTable" width="100%" style="border: 1px solid gray;"> <tr> <th style="border: 1px solid gray;" width="33%"> Promo Master ID </th> <th style="border: 1px solid gray;" width="33%"> Name </th> <th style="border: 1px solid gray;" width="33%"> PLU </th> </tr> *注意：有一个关闭表标签，其中只有一些不相关的额外代码。 我想知道如何用数据库中保存的数据填充表格。 cmd = New SqlCommand("SELECT PromoMasterID, Description, PLU FROM PromoMaster") cmd.Connection = conn conn.Open() 这是我用于通话的内容，PromoMasterID、说明、PLU 是我想要的列，我如何使用它来填充表格？ 如有任何帮助，我们将不胜感激，谢谢。 嗯，您可以填写 HTML 表格，但是这里您有“哦，所以”很多更好的选择。 但是，仅供参考，如果您使用 runat="server" 标记控件（表格），则后面的代码现在可以自由地操纵该 HTML 表格对象。 因此，说出这个标记： <table ID="Hotels" runat="server" style="width:30%" class="table table-hover table-bordered table-striped" > <tr> <th style="border: 1px solid gray;" width="33%"> Hotel Name </th> <th style="border: 1px solid gray;" width="33%"> Description </th> </tr> </table> 所以，我们背后的代码可以是： Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not IsPostBack Then LoadTable End If End Sub Sub LoadTable() Dim strSQL = "SELECT HotelName, Description FROM tblHotels ORDER BY HotelName" Dim dtHotels As DataTable = MyRst(strSQL) For Each OneRow As DataRow In dtHotels.Rows Dim NewRow As New HtmlTableRow() Dim HotelName As New HtmlTableCell() HotelName.InnerText = OneRow("HotelName").ToString Dim Description As New HtmlTableCell() Description.InnerText = OneRow("Description").ToString NewRow.Cells.Add(HotelName) NewRow.Cells.Add(Description) Hotels.Rows.Add(NewRow) Next End Sub 结果是这样的： 并注意表的类设置（它们是引导类，因此生成的表看起来相当不错）。 但是，您最好使用 GridView 控件，因为它们具有数据感知能力，并且输出无论如何都将是 HTML 表格。 因此，使用 GridView 代替上面的内容，我们就有了这样的标记： <asp:GridView ID="GHotels" runat="server" style="width:30%" CssClass="table table-hover table-striped"> </asp:GridView> 我们的代码现在变成了这样： Sub LoadTable() Dim strSQL = "SELECT HotelName, Description FROM tblHotelsA ORDER BY HotelName" Dim dtHotels As DataTable = MyRst(strSQL) GHotels.DataSource = dtHotels GHotels.DataBind() End Sub 因此，请注意上面所需的代码是多么少。甚至请注意我们如何不必写出上面的列名称。 上面的结果是这样的： 因此，除非您正在追求世界贫困，否则我认为没有什么理由使用 HTML 表格，而不是使用像 GridView 这样的“数据感知”控件，它最终会输出有效的 HTML 表格标记无论如何。 为了完成这篇文章，我使用了一个名为 MyRst 的方便的“帮助器”例程，我将其放置在全局代码模块中（因为人们很快就会厌倦一遍又一遍地输入连接和数据表代码）。该例程仅返回一个数据表。 所以，我的第一件事是这样的： Public Function MyRst(strSQL As String) As DataTable ' general get any data from SQL Dim rstData As New DataTable Using conn As New SqlConnection(My.Settings.TEST4) Using cmdSQL As New SqlCommand(strSQL, conn) conn.Open() rstData.Load(cmdSQL.ExecuteReader) rstData.TableName = strSQL End Using End Using Return rstData End Function

如何通过单击

请看小提琴。当我单击单元格时，我可以获得值和列名。我想知道如何获取行索引和列索引？以下是js代码， <p>请参阅<a href="http://jsfiddle.net/8hnmw8j1/" rel="noreferrer">小提琴</a>。当我单击单元格时，我可以获得值和列名称。我想知道如何获取行索引和列索引？以下是js代码，</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function(){ $(&#39;#example tbody&#39;).on( &#39;click&#39;, &#39;td&#39;, function () { alert(&#39;Data:&#39;+$(this).html().trim()); alert(&#39;Row:&#39;+$(this).parent().find(&#39;td&#39;).html().trim()); alert(&#39;Column:&#39;+$(&#39;#example thead tr th&#39;).eq($(this).index()).html().trim()); }); }); &lt;/script&gt; </code></pre> </question> <answer tick="false" vote="20"> <p>执行此操作的另一种本机 JS 方法是使用在使用表元素时可以找到的 TableData 属性。例如， <pre><code>cellIndex</code></pre> 将返回 <pre><code>td</code></pre> 元素的列索引，而 <pre><code>rowIndex</code></pre> 将返回 <pre><code>tr</code></pre> 元素的索引。这两个属性将大大简化我们的代码，如以下代码所示。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>const cells = document.querySelectorAll(&#39;td&#39;); cells.forEach(cell =&gt; { cell.addEventListener(&#39;click&#39;, () =&gt; console.log(&#34;Row index: &#34; + cell.closest(&#39;tr&#39;).rowIndex + &#34; | Column index: &#34; + cell.cellIndex)); });</code></pre> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td&gt;0:0&lt;/td&gt; &lt;td&gt;0:1&lt;/td&gt; &lt;td&gt;0:2&lt;/td&gt; &lt;td&gt;0:3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;1:0&lt;/td&gt; &lt;td&gt;1:1&lt;/td&gt; &lt;td&gt;1:2&lt;/td&gt; &lt;td&gt;1:3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;2:0&lt;/td&gt; &lt;td&gt;2:1&lt;/td&gt; &lt;td&gt;2:2&lt;/td&gt; &lt;td&gt;2:3&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="6"> <p>不需要jQuery，用原生JS即可实现：</p> <pre><code>const table = document.querySelector(&#39;table&#39;); const rows = document.querySelectorAll(&#39;tr&#39;); const rowsArray = Array.from(rows); table.addEventListener(&#39;click&#39;, (event) =&gt; { const rowIndex = rowsArray.findIndex(row =&gt; row.contains(event.target)); const columns = Array.from(rowsArray[rowIndex].querySelectorAll(&#39;td&#39;)); const columnIndex = columns.findIndex(column =&gt; column == event.target); console.log(rowIndex, columnIndex) }) </code></pre> </answer> <answer tick="true" vote="5"> <p>最好的可能是在这里使用<pre><code>closest</code></pre>：</p> <blockquote> <p>对于集合中的每个元素，通过测试元素本身并在 DOM 树中向上遍历其祖先来获取与选择器匹配的第一个元素。</p> </blockquote> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function(){ $(&#39;#example tbody&#39;).on( &#39;click&#39;, &#39;td&#39;, function () { alert(&#39;Row &#39; + $(this).closest(&#34;tr&#34;).index()); alert(&#39;Column &#39; + $(this).closest(&#34;td&#34;).index()); }); }); &lt;/script&gt; </code></pre> </answer> <answer tick="false" vote="3"> <p>index() 可以完成这项工作。只需找到正确的集合和当前元素即可 elementCollcetions.index(currentElement)</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> $(document).ready(function(){ $(&#39;#example tbody&#39;).on(&#39;click&#39;, &#39;td&#39;, function () { alert(&#39;ColumnIndex:&#39;+ $(this).parent().find(&#39;td&#39;).index(this)); alert(&#39;RowIndex:&#39;+ $(this).parent().parent().find(&#39;tr&#39;).index($(this).parent())); }); }); </code></pre> <pre><code>&lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;table id=&#34;example&#34;&gt;&lt;tbody&gt; &lt;tr&gt;&lt;td&gt;11&lt;/td&gt;&lt;td&gt;12&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;21&lt;/td&gt;&lt;td&gt;22&lt;/td&gt;&lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>用这个</p> <pre><code>$(document).ready(function(){ $(&#39;#example tbody&#39;).on( &#39;click&#39;, &#39;td&#39;, function () { var column_num = parseInt( $(this).index() ); alert(&#39;column index:&#39;+column_num ); var row_num = parseInt( $(this).parent().index() ); alert(&#39;rowindex:&#39;+row_num ); }); }); </code></pre> </answer> </body></html>

使用选择下拉菜单过滤 html 表格列

我正在尝试制作一个表格，可以根据其中的值过滤每列。我希望每个下拉列表仅与该列关联，所以就像第一个下拉列表仅查看第一个...

HTML 中的单元格间距和单元格填充

我想了解 HTML 中的单元格间距和单元格填充 我在 vscode 中编码，所以当我尝试输入 cellspacing 时，它没有将我显示为表格属性。我刚刚开始学习 HTML，所以有人可以...

为表格行标题和列标题添加边框样式

如果可能的话，我将不胜感激。我正在尝试向我们公司平台的 HTML 编辑器自动生成的表格添加一些全局 CSS 样式，但正在运行...

如何合并此表中的单元格[重复]

这是我的代码，非常基础，抱歉我不是专家，只是感兴趣。 $query = "SELECT \*, GROUP_CONCAT(`Kode Unit`) AS Kodeunit, COUNT(`Kode Unit`) AS Jumlah FROM `STOCKS` GROUP BY `Nama Produ...

使用 eclipse IDE 创建 selenium 测试用例时表未加载到 chromedriver 中

我正在使用 selenium chromedriver 从表中获取数据。当我使用 Chrome 浏览器正常打开网页时，表格加载正确。但是在使用硒执行期间，...

如何将表格标题固定到 HTML 表格顶部？

我有一个网页，用于比较多个事物的特征，我们称它们为小部件。每个小部件都表示为自己的列，行是小部件的每个可能的特征...

如何在<td>标签中制作单元格

我有一张这样的桌子： 不 名称 产品 类型 单位数量 1 ADA B112 3 件 2 ADA B253 1个 3 ADA K23 6 件 4 杜兹克 l1 10 件 5 杜兹克 l5 10 件 6 那罗 NX 1个 我有这个 SQL： $查询=&...

如何在 PHP 中从相关数组中查询值并将其显示在 HTML 表格中

以下二维数组存储书籍的信息（1.ID、2.Name、3.Author ID、4.Author Name、5.Publisher ID、6.Publisher Name、7.Publisher Reputation）： $books = array(array('book_...

为什么最后一个孩子不工作？

我试图给我的表 td 一个与最后一个 td 不同的边框底部。我哪里错了？ CSS 。架子 { 左边框：15px 实线#959595； } .rack td { 边框底部：15px 实线 #f0...

可滚动 Div 内具有固定标题的大型 HTML 表格。怎么办？

这个问题困扰我有一段时间了。 以下是同一页面中的两个固定标题 html 表： 站点1 https://datatables.net/release-datatables/extras/FixedHeader/two_tables.html 但是，...

如何使用 WordPress 中的 WPDataTables 插件跟踪每个用户的导出操作？

我目前正在评估 WordPress 项目的 WPDataTables 插件。具体来说，我需要跟踪每个用户从表中导出数据的次数。此功能对于我们的项目至关重要...

thead 有 1 个 td（全宽），tbody 有 2 列（宽度不取决于 thead）

好吧，长标题短篇小说。我有一个结构如下的表： 好吧，长标题短篇小说。我有一个这样结构的表： <table> <thead> <tr><th>longer Heading with a width of 100%</th></tr> </thead> <tbody> <tr><td>cell 1</td><td>cell 2</tr> <tr><td>cell 3</td><td>cell 4</tr> </tbody> </table> 我希望 th 为全宽，并且不更改表格单元格的宽度。 我猜想有一些 CSS 显示属性可以实现这一点，但我还没有找到可行的解决方案。 <table> <thead> <tr><th colspan="2">longer Heading with a width of 100%</th></tr> </thead> <tbody> <tr><td>cell 1</td><td>cell 2 </td></tr> <tr><td>cell 3</td><td>cell 4 </td></tr> </tbody> 使用colspan将为你解决问题 这个？ <th colspan="2">...</th> 比这更简单：您只需要在 th 元素上使用 colspan 即可。 Colspan 定义元素扩展了多少个单元格： <table> <thead> <tr><th colspan="2">longer Heading with a width of 100%</th></tr> </thead> <tbody> <tr><td>cell 1</td><td>cell 2</td></tr> <tr><td>cell 3</td><td>cell 4</td></tr> </tbody> </table> 宽度为 100% 的较长标题

在网页上的 HTML 表内显示 MySQL 数据库表中的值

我想从数据库表中检索值并将它们显示在页面的 html 表中。 我已经搜索过这个，但找不到答案，尽管这肯定很简单（这

如何在Codeigniter中将MySql垂直表格显示为水平表格？

我想从MYSQL表中获取数据并将数据显示在HTML表中，如“HTML表”图片所示。 MySql 表 MySql 表 HTML 表格 HTML 表格

JQuery 循环遍历表获取 ID 并更改特定列中的值

我有一个包含 2-3 个表格的页面。在这些表中，我想更改位于 中的特定列的文本以及每个 行中的值，并且我想从...

如何去除DIV表格单元格之间的边框？

我有以下内容： 细胞... 我有以下内容： <div style="display:table;"> <div style="display:table-row;background:grey;"> <div style="display:table-cell;">Cell 1</div> <div style="display:table-cell;">Cell 2</div> <div style="display:table-cell;">Cell 3</div> <div style="display:table-cell;">Cell 4</div> </div> </div> 它在细胞之间设置了一个白色边框，我一生都无法摆脱它。 我已在每个表、行和单元格级别尝试了以下所有操作，但均无济于事： border:0px; border-collapse:collapse; border-spacing: 0px; 当我从前两个 DIV 单元格中删除 display:table-cell 时，整行的边距发生了巨大变化，但所有 4 个单元格之间的白色边框并没有消失，这让我认为边框来自 display:table-row 。 但似乎没有任何作用。 <div style="display:table; border-collapse: collapse; width: 100%;"> <div style="display:table-row; background:grey;"> <div style="display:table-cell; margin: 0; padding: 0; border: 0;">Cell 1</div> <div style="display:table-cell; margin: 0; padding: 0; border: 0;">Cell 2</div> <div style="display:table-cell; margin: 0; padding: 0; border: 0;">Cell 3</div> <div style="display:table-cell; margin: 0; padding: 0; border: 0;">Cell 4</div> </div> </div> 试试这个

为什么我的表格标题在 Firefox 中占表格高度的一半？

我有一个 HTML 表格： &... 我有一个 HTML 格式的表格： <div style="height: 90vh"> <div style="position: relative; width: 100%; height: 100%"> <table style="height: 100%"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> </tbody> </table> </div> </div> 当我在 Firefox 中打开它时，标题占据表格高度的一半，但当我在 Google Chrome 上打开它时，标题仅占据其内容的高度。 您知道这个问题吗？ 我希望它像 Google Chrome 一样工作，并且标题仅占据其内容的高度。 您可以为 height: 1em; 添加 th。如果th中有换行符，它会根据内容自动增长 th { height: 1em; } <div style="height: 90vh"> <div style="height: 100%"> <table style="height: 100%"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> </tbody> </table> </div> </div>

firefox 中的 html 表格标题和正文

我有一个 HTML 表格： 我有一个 HTML 格式的表格： <div style="height: 90vh"> <div style="position: relative; width: 100%; height: 100%"> <table style="display: table; height: 100%"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> </tbody> </table> </div> </div> 当我在 Firefox 中打开它时，标题占据了表格的一半，但是当我在 Google Chrome 上打开它时，标题只占据了其内容的高度。 您知道这个问题吗？ 我希望它像 Google Chrome 一样工作，并且标题仅占据其内容的高度。 您可以为 height: 1em; 添加 th。 th { height: 1em; } <div style="height: 90vh"> <div style="position: relative; width: 100%; height: 100%"> <table style="display: table; height: 100%"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> </tbody> </table> </div> </div>