html-table 相关问题

由于它与HTML有关，因此表格用于以表格方式显示数据。关于HTML表的问题应该通过显示有问题的源代码来询问，或者，如果问题是关于根据需求创建表失败的尝试，提问者需要显示失败的尝试，描述期望和行为如何不同。

我有一个 html 表单，其中有一个选择列表框，您可以从中选择多个值，因为它的 multiple 属性设置为 multiple。考虑表单方法是“GET”。表单的 html 代码...

php html drop-down-menu combobox html-table

回答 11 投票 0

所以，我有这张桌子 < table class="table-fixed border-separate border border-green-800"> < thead class="bg-indigo-800 border-b-2 border-indigo-200 w-full"&g...

html vue.js html-table tailwind-css

回答 2 投票 0

<tr>中的图像破坏了我的脚本并且无法获取tr的数据

我正在网站上制作一个仪表板，用户可以在其中与数据库进行交互。页面是用 PHP 制作的，表格也是如此。当用户点击一行时，他可以编辑该行的数据

javascript php html-table popup

回答 1 投票 0

简单的html表格设计问题

我正在尝试解决一个问题：这是一个 HTML 练习，我必须为具有此设计的表格编写 HTML 代码：但我似乎无法直接设置它，这是我的代码： ... 我正在尝试解决一个问题：这是一个 HTML 练习，我必须为具有此设计的表格编写 HTML 代码：但我似乎无法直接设置它，这是我的代码： <table border> <tr> <td rowspan="2" colspan="2"> Batatas </td> <td rowspan="3" colspan="2"> Couves </td> <td> Alhos </td> <td> Cebolas </td> </tr> <tr> <td rowspan="2" colspan="2"> Alface </td> </tr> <tr> <td colspan="2"> Nabos </td> </tr> </table> 结果如下：第一个“td”标签中的 rowspan="2" 不应该使第一个单元格更大（高度）吗？我做错了什么？在这里尝试这个在线工具：http://html-tables.com/ 如果您仅使用单元格合并，您将看到 3 行如何在视觉上折叠为 2 行。我认为你需要嵌套表格才能达到这种效果。实际上你面临的问题不是因为你的代码，而是因为html表格渲染的一般规则，这是因为表格单元格的合并而产生的为了解决 <table> 标签的这个缺点，我建议使用 <div> 标签作为更好的方法。试试这个.... <table border> <tr> <td rowspan="2" colspan="1"> Batatas </td> <td rowspan="3" colspan="1"> Couves </td> <td rowspan="1" colspan="1"> Alhos </td> <td rowspan="1" colspan="1"> Cebolas </td> </tr> <tr> <td rowspan="1" colspan="2"> Alface </td> </tr> <tr rowspan="1" colspan="2"> <td> Nabos </td> </tr> </table> 更新正如我所注意到的，这不能使用 <table> 标签来完成，您可以使用 div 方法。这些 div 标签能够生成您的布局。我刚刚解决了你的问题，并且我刚刚使用 <div> 标签解决了你的问题，看看吧 <div style=" background-color: powderblue;border:1px solid black; width:410px; height:310px"> <div style="float:left;"> <div style="border:1px solid black; width:100px; float:none; height:200px">Batatas </div> <div style="border:1px solid black; width:100px; float:none; height:99px">Nabos </div> </div> <div> <div style="border:1px solid black;width:100px; float:left; height:301px">Couves </div> <div style="border:1px solid black;width:100px; float:left; height:100px">Alhos </div> <div style="border:1px solid black;width:100px; float:left; height:100px">Cebolas </div> <div style="border:1px solid black;width:202px; float:left; height:199px">Alface </div> </div> </div> 问得好。我得到的最接近的（没有对嵌套表感到疯狂）就是这样： <table border> <tr> <td colspan="2"> Batatas </td> <td rowspan="3" colspan="2"> Couves </td> <td> Alhos </td> <td> Cebolas </td> </tr> <tr> <td colspan="2"></td> <td rowspan="2" colspan="2"> Alface </td> </tr> <tr> <td colspan="2"> Nabos </td> </tr> </table> 如果这对您不起作用（并且您不想进入复杂的嵌套 html 表格），那么我的普遍看法似乎是从 html 表格转向使用 CSS。显然，使用 CSS/div，您可以拥有更多控制权。您可以通过为每行赋予相同的高度来做到这一点（）。我的意思是这里有三行，然后每行给出 height="33.33%" 。您还可以使用 css 给出高度， tr{ 高度:25px; }

html html-table

回答 4 投票 0

使用 rvest 抓取表格 - 嵌入符号/链接

我尝试在以下网页上抓取表格：http://www.comstats.de/squad/1-FC+Bayern+München 乍一看我的方法是成功的，使用以下代码： read_html("http://www.

html web-scraping html-table rvest

回答 1 投票 0

正确获取单击按钮的行索引

我尝试了多种方法来获取表内单击按钮的行索引。桌子： while ($info = mysqli_fetch_array($sql)) { 回显“”；回声“{$信息['名称'...

javascript jquery html-table onclick row

回答 4 投票 0

如何抓取 html 表中的所有值，包括 span 和 href

我有以下html代码：我有以下html代码：<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table border="1" cellspacing="0" class="Quote xaltrow" id="MainContent_Quote1_Table1_Table1" style="border-collapse:collapse;border-collapse:collapse;"> <thead> <tr class="xheader"> <th> <span>Sym</span> <a class="ToggleNames" href="/Analytics/MostActive.aspx">-Names</a> <span class="arrow"></span> </th> <th colspan="3">Bid - Ask</th> <th>Last <span class="arrow"></span></th> <th>Chg <span class="arrow"></span></th> <th>%Ch <span class="arrow"></span></th> <th>Vol <span class="arrow"></span></th> <th>$Vol <span class="arrow"></span></th> <th>#Tr <span class="arrow"></span></th> <th>Open-Hi-Lo</th> <th>Year Hi-Lo</th> <th>Last Tr</th> <th>News</th> <th>Delay</th> </tr> </thead> <tbody> <tr class="Upd UpdURHHBY-"> <td class="sym"> <a class="qn Name" href="/Quote/Detail.aspx?symbol=RHHBY&region=U">RHHBY</a> <span>- Q</span> <span class="Name">- ROCHE HLDG LTD SPONS</span> </td> <td class="bac" colspan="3">no orders</td> <td class="UpdL">31.92</td> <td class=" xred UpdC">-0.31</td> <td class="xsmall UpdCP xred">-1.0</td> <td class="q-regright UpdV">851.0</td> <td class="q-smright UpdW">27,163</td> <td class="xsmall UpdT">1,461</td> <td class="xsmall xcentre"><span class="UpdO">32.03</span>  <span class="UpdH">32.067</span>  <span class="UpdI">31.84</span></td> <td class="xsmall xcentre">33.74  27.09</td> <td class="xsmall xcentre UpdE"></td> <td class="xsmall xcentre"></td> <td class="xsmall xcentre">realtime</td> </tr> <tr class="Upd UpdUNSRGY-"> <td class="sym"> <a class="qn Name" href="/Quote/Detail.aspx?symbol=NSRGY&region=U">NSRGY</a> <span>- Q</span> <span class="Name">- NESTLE SA REG SHRS S</span> </td> <td class="bac" colspan="3">no orders</td> <td class="UpdL">76.07</td> <td class=" xred UpdC">-0.23</td> <td class="xsmall UpdCP xred">-0.3</td> <td class="q-regright UpdV">336.2</td> <td class="q-smright UpdW">25,574</td> <td class="xsmall UpdT">1,785</td> <td class="xsmall xcentre"><span class="UpdO">75.89</span>  <span class="UpdH">76.07</span>  <span class="UpdI">75.66</span></td> <td class="xsmall xcentre">83.00  66.28</td> <td class="xsmall xcentre UpdE"></td> <td class="xsmall xcentre"></td> <td class="xsmall xcentre">realtime</td> </tr> <tr class="Upd UpdUNTTYY-"> <td class="sym"> <a class="qn Name" href="/Quote/Detail.aspx?symbol=NTTYY&region=U">NTTYY</a> <span>- Q</span> <span class="Name">- NIPPON TELEGRAPH AND TELEPHONE C</span> </td> <td class="bac" colspan="3">no orders</td> <td class="UpdL">43.90</td> <td class=" xred UpdC">-0.56</td> <td class="xsmall UpdCP xred">-1.3</td> <td class="q-regright UpdV">316.2</td> <td class="q-smright UpdW">13,883</td> <td class="xsmall UpdT">889</td> <td class="xsmall xcentre"><span class="UpdO">44.145</span>  <span class="UpdH">44.15</span>  <span class="UpdI">43.89</span></td> <td class="xsmall xcentre">44.57  43.00</td> <td class="xsmall xcentre UpdE"></td> <td class="xsmall xcentre"></td> <td class="xsmall xcentre">realtime</td> </tr> <tr class="Upd UpdUTCEHY-"> <td class="sym"> <a class="qn Name" href="/Quote/Detail.aspx?symbol=TCEHY&region=U">TCEHY</a> <span>- Q</span> <span class="Name">- TENCENT HOLDINGS ADR</span> </td> <td class="bac" colspan="3">no orders</td> <td class="UpdL">29.63</td> <td class=" xgreen UpdC">+0.06</td> <td class="xsmall UpdCP xgreen">0.2</td> <td class="q-regright UpdV">380.1</td> <td class="q-smright UpdW">11,263</td> <td class="xsmall UpdT">1,341</td> <td class="xsmall xcentre"><span class="UpdO">29.65</span>  <span class="UpdH">29.78</span>  <span class="UpdI">29.60</span></td> <td class="xsmall xcentre">29.85  19.74</td> <td class="xsmall xcentre UpdE"></td> <td class="xsmall xcentre"></td> <td class="xsmall xcentre">realtime</td> </tr> <tr class="Upd UpdUATLKY-"> <td class="sym"> <a class="qn Name" href="/Quote/Detail.aspx?symbol=ATLKY&region=U">ATLKY</a> <span>- Q</span> <span class="Name">- ATLAS COPCO AB SER A</span> </td> <td class="bac" colspan="3">no orders</td> <td class="UpdL">35.46</td> <td class=" xred UpdC">-0.23</td> <td class="xsmall UpdCP xred">-0.6</td> <td class="q-regright UpdV">316.2</td> <td class="q-smright UpdW">11,213</td> <td class="xsmall UpdT">209</td> <td class="xsmall xcentre"><span class="UpdO">35.74</span>  <span class="UpdH">35.81</span>  <span class="UpdI">35.46</span></td> <td class="xsmall xcentre">35.72  23.58</td> <td class="xsmall xcentre UpdE"></td> <td class="xsmall xcentre"></td> <td class="xsmall xcentre">realtime</td> </tr> <tr class="Upd UpdUVLKAY-"> <td class="sym"> <a class="qn Name" href="/Quote/Detail.aspx?symbol=VLKAY&region=U">VLKAY</a> <span>- Q</span> <span class="Name">- VOLKSWAGEN A G SPONS</span> </td> <td class="bac" colspan="3">no orders</td> <td class="UpdL">29.15</td> <td class=" xred UpdC">-0.34</td> <td class="xsmall UpdCP xred">-1.2</td> <td class="q-regright UpdV">323.6</td> <td class="q-smright UpdW">9,432</td> <td class="xsmall UpdT">782</td> <td class="xsmall xcentre"><span class="UpdO">28.935</span>  <span class="UpdH">29.25</span>  <span class="UpdI">28.90</span></td> <td class="xsmall xcentre">33.60  25.88</td> <td class="xsmall xcentre UpdE"></td> <td class="xsmall xcentre"></td> <td class="xsmall xcentre">realtime</td> </tr> <tr class="Upd UpdUTMICY-"> <td class="sym"> <a class="qn Name" href="/Quote/Detail.aspx?symbol=TMICY&region=U">TMICY</a> <span>- Q</span> <span class="Name">- TREND MICRO ADR #</span> </td> <td class="bac" colspan="3">no orders</td> <td class="UpdL">42.78</td> <td class=" xred UpdC">-0.64</td> <td class="xsmall UpdCP xred">-1.5</td> <td class="q-regright UpdV">210.6</td> <td class="q-smright UpdW">9,011</td> <td class="xsmall UpdT">155</td> <td class="xsmall xcentre"><span class="UpdO">42.905</span>  <span class="UpdH">42.93</span>  <span class="UpdI">42.78</span></td> <td class="xsmall xcentre">44.75  32.04</td> <td class="xsmall xcentre UpdE"></td> <td class="xsmall xcentre"></td> <td class="xsmall xcentre">realtime</td> </tr> <tr class="Upd UpdUALIOY-"> <td class="sym"> <a class="qn Name" href="/Quote/Detail.aspx?symbol=ALIOY&region=U">ALIOY</a> <span>- Q</span> <span class="Name">- ACTELION LTD</span> </td> <td class="bac" colspan="3">no orders</td> <td class="UpdL">70.66</td> <td class=" xgreen UpdC">+0.06</td> <td class="xsmall UpdCP xgreen">0.1</td> <td class="q-regright UpdV">123.3</td> <td class="q-smright UpdW">8,715</td> <td class="xsmall UpdT">56</td> <td class="xsmall xcentre"><span class="UpdO">70.538</span>  <span class="UpdH">70.70</span>  <span class="UpdI">70.50</span></td> <td class="xsmall xcentre">70.89  34.83</td> <td class="xsmall xcentre UpdE"></td> <td class="xsmall xcentre"></td> <td class="xsmall xcentre">realtime</td> </tr> </tbody> </table> </body> </html> 这是我抓取桌子的代码：import lxml.html response = open('test.html') html2 = response.read() root = lxml.html.fromstring(html2) for row in root.xpath('//*[@id="MainContent_Quote1_Table1_Table1"]/tbody/tr'): cells = row.xpath('.//td/text()') print cells 这是结果：['no orders', '31.92', '-0.31', '-1.0', '851.0', '27,163', '1,461', u'\xa0\xa0', u'\xa0\xa0', u'33.74\xa0\xa027.09', 'realtime'] ['no orders', '76.07', '-0.23', '-0.3', '336.2', '25,574', '1,785', u'\xa0\xa0', u'\xa0\xa0', u'83.00\xa0\xa066.28', 'realtime'] ['no orders', '43.90', '-0.56', '-1.3', '316.2', '13,883', '889', u'\xa0\xa0', u'\xa0\xa0', u'44.57\xa0\xa043.00', 'realtime'] ['no orders', '29.63', '+0.06', '0.2', '380.1', '11,263', '1,341', u'\xa0\xa0', u'\xa0\xa0', u'29.85\xa0\xa019.74', 'realtime'] ['no orders', '35.46', '-0.23', '-0.6', '316.2', '11,213', '209', u'\xa0\xa0', u'\xa0\xa0', u'35.72\xa0\xa023.58', 'realtime'] ['no orders', '29.15', '-0.34', '-1.2', '323.6', '9,432', '782', u'\xa0\xa0', u'\xa0\xa0', u'33.60\xa0\xa025.88', 'realtime'] ['no orders', '42.78', '-0.64', '-1.5', '210.6', '9,011', '155', u'\xa0\xa0', u'\xa0\xa0', u'44.75\xa0\xa032.04', 'realtime'] ['no orders', '70.66', '+0.06', '0.1', '123.3', '8,715', '56', u'\xa0\xa0', u'\xa0\xa0', u'70.89\xa0\xa034.83', 'realtime'] 我希望它是以下内容：['RHHBY', 'ROCHE HLDG LTD SPONS', 'no orders', '31.92', '-0.31', '-1.0', '851.0', '27,163', '1,461', '32.03', '32.067', '31.84', '33.74', '27.09', '', '', 'realtime'] ['NSRGY', 'NESTLE SA REG SHRS S', 'no orders', '76.07', '-0.23', '-0.3', '336.2', '25,574', '1,785', '75.89', '76.07', '75.66', '83.00', '66.28', '', '', 'realtime'] ['NTTYY', 'NIPPON TELEGRAPH AND TELEPHONE C', 'no orders', '43.90', '-0.56', '-1.3', '316.2', '13,883', '889', '44.145', '44.15', '43.89', '44.57', '43.00', 'realtime'] ... 如何获取 <td> 内有跨度和/或 <a> 的值？这张桌子可能非常大。我希望它是一个像上面那样的快速脚本。我计划将这个数组写入数据库或 CSV。不知道这是否是您想要的，但您可以抓取 //td/span 和 a 元素中的文本： import lxml.html response = open('test.html') html2 = response.read() root = lxml.html.fromstring(html2) for row in root.xpath('//*[@id="MainContent_Quote1_Table1_Table1"]/tbody/tr'): cells=[] cells = row.xpath('.//td/a/text()') cells = cells + row.xpath('.//td/text()') cells = cells + row.xpath('.//td/span/text()') print(cells) 要消除格式，您可以使用以下内容： print([c.replace('\xa0','') for c in cells])

python html csv web-scraping html-table

回答 1 投票 0

设置 TD 的 CSS 单元格间距

所以我有这张桌子。我知道我不应该使用表格进行布局，但在这种情况下我被迫这样做。我需要设置特定 TD 的单元格间距（具有 .ritey 类的 TD）的样式。我知道我...

html css html-table cellspacing

回答 3 投票 0

在 HTML 表格中抓取特定的 <td>

我正在尝试使用 PHP 抓取表格，问题是我已经设法抓取它，但我得到了网页表格上的所有内容。我不确定如何指定要抓取哪些 TD 和/或 TR...

php html web-scraping html-table simple-html-dom

回答 3 投票 0

如何使列填充可用空间而不导致表格溢出？

我正在尝试制作一个响应式表格，其中：第 1-3 列和第 5 列将始终自动调整大小以适合其内容。第 4 列将占据所有剩余的水平空间。第 4 列将有溢出 h...

html css layout html-table responsive-design

回答 1 投票 0

CSS：表格行转单列

<div id="map-Container"> <table border="1" id="maptable"> <tbody> <tr class="mapmaster1"> <td class="current"><span class="map1-1"></span><br>time1</td> <td class="next"><span class="map1-2"></span><br>time2</td> <td class="map1"><span class="map1-3"></span><br>time3</td> <td class="map1"><span class="map1-4"></span><br>time4</td> <td class="map1"><span class="map1-5"></span><br>time5</td> <td class="map1"><span class="map1-6"></span><br>time6</td> </tr> <tr class="mapmaster2"> <td id="map2-1" class="current">02:52</td> <td id="map2-2" class="next">05:54</td> <td id="map2-3" class="">13:45</td> <td id="map2-4" class="">17:56</td> <td id="map2-5" class="">21:33</td> <td id="map2-6" class="">00:13</td> </tr> </tbody> </table> </div> 以上是我的代码。 Jsfiddle 我正在努力让我的桌子看起来像这个设计。图片如果有人能帮助我那就太好了。预先感谢。尝试修改我的代码，但不幸的是没有成功。假设您坚持使用该 HTML（包括第一个 td 中相当虚假的 br），您可以删除正常的表格边框并在 td 元素上使用边框和背景颜色来获得您想要的外观。基本上，单元格之间的“间隙”是通过放置与父边框颜色相同的边框（在本例中为白色）来实现的，而不是存在任何实际间隙。 <style> #maptable { border-collapse: collapse; } #maptable, #maptable * { border: 0 white solid; } #maptable td { background: cyan; border-width: 0 1em; padding: 0 2em; } #maptable tr:first-child>td { border-radius: 20px 20px 0 0; } #maptable tr:last-child>td { padding-bottom: 1.5em; border-radius: 0 0 20px 20px; } </style> <div id="map-Container"> <table border="1" id="maptable"> <tbody> <tr class="mapmaster1"> <td class="current"><span class="map1-1"></span><br>time1</td> <td class="next"><span class="map1-2"></span><br>time2</td> <td class="map1"><span class="map1-3"></span><br>time3</td> <td class="map1"><span class="map1-4"></span><br>time4</td> <td class="map1"><span class="map1-5"></span><br>time5</td> <td class="map1"><span class="map1-6"></span><br>time6</td> </tr> <tr class="mapmaster2"> <td id="map2-1" class="current">02:52</td> <td id="map2-2" class="next">05:54</td> <td id="map2-3" class="">13:45</td> <td id="map2-4" class="">17:56</td> <td id="map2-5" class="">21:33</td> <td id="map2-6" class="">00:13</td> </tr> </tbody> </table> </div> 您当然会想要更改实际值以获得您想要的确切外观。如果您可以控制 HTML，您可能需要考虑这是否真的是表格数据（例如，是否有更多值等），如果不是，那么网格可能更容易设计样式。此外，在上面的代码片段中，我每次都拼写出#maptable，以防您使用较旧的浏览器 - 现在您可能会使用 CSS 嵌套。

css html-table

回答 1 投票 0

具有全选功能的超脚本表选择

我有一个小问题，不知道如何解决。我想构建一个表选择，并选择超标中的所有功能。它适用于一张桌子，但我想让它适用于

html html-table hyperscript

回答 1 投票 0

从网站导出 Excel 电子表格 - Python

我正在尝试找到一种从网站导出 Microsoft Excel 电子表格 (.xlsx) 并存储在本地（到我的桌面）或数据库的方法。我能够解析带有表格内容的 URL 并显示/

python html excel automation html-table

回答 1 投票 0

Php - 数组到字符串的转换[重复]

我想输出数据库中的所有记录。到目前为止一切顺利，但是当我循环它时，php 给我一个错误“数组到字符串转换”。我向数组添加了一个索引，但它只是......

php html pdo html-table fetchall

回答 3 投票 0

结合了 Angular Material table-expandable-rows 和 table-wrapped，并添加了自定义展开详细信息，但无法显示自定义详细内容

我尝试创建一个结合了 table-expandable-row 和 table-wrapped 的组件，并使用 ngTemplateOutletContext 添加自定义详细信息，但它不起作用。堆栈闪电战： https://stackblitz.com/e...

angular html-table material-ui

回答 1 投票 0

使用Javascript显示/隐藏表行 - 可以使用ID - 如何使用类？

我有一个表格，列出了吉他商店中的商品 - 每行包含一件商品。每行（以及每件商品）都是全新的、二手的或寄售的。我想要一个...

javascript html-table

回答 3 投票 0

使用 JavaScript 将 ID 添加到表格行？

我想在每次单击某个元素时向表格添加一个表格行。添加的表行应该有一个 ID。但该 ID 不会出现在浏览器中。函数添加（）{ document.getElementB...

javascript html css html-table

回答 3 投票 0

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

我在 ASP.NET 门户网站中有一个基本的 HTML 表设置：我在 ASP.NET 门户网站中设置了基本的 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> 注意：有一个结束表标记，其中只有一些不相关的额外代码。我想知道如何使用 SQL Server 数据库中保存的数据填充表。 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 因此，请注意不需要循环代码，因此请注意我们的标记行非常少，并且我们的代码行也非常少。因此，几乎没有理由去走各种额外循环代码和各种额外 HTML 标记的道路。

asp.net sql-server database vb.net html-table

回答 1 投票 0

有没有办法从数据库填充 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

sql asp.net database vb.net html-table

回答 1 投票 0

如何通过单击

请看小提琴。当我单击单元格时，我可以获得值和列名。我想知道如何获取行索引和列索引？以下是js代码， <p>请参阅<a href="http://jsfiddle.net/8hnmw8j1/" rel="noreferrer">小提琴</a>。当我单击单元格时，我可以获得值和列名称。我想知道如何获取行索引和列索引？以下是js代码，</p> <pre><code><script type="text/javascript"> $(document).ready(function(){ $('#example tbody').on( 'click', 'td', function () { alert('Data:'+$(this).html().trim()); alert('Row:'+$(this).parent().find('td').html().trim()); alert('Column:'+$('#example thead tr th').eq($(this).index()).html().trim()); }); }); </script> </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('td'); cells.forEach(cell => { cell.addEventListener('click', () => console.log("Row index: " + cell.closest('tr').rowIndex + " | Column index: " + cell.cellIndex)); });</code></pre> <pre><code><table> <tr> <td>0:0</td> <td>0:1</td> <td>0:2</td> <td>0:3</td> </tr> <tr> <td>1:0</td> <td>1:1</td> <td>1:2</td> <td>1:3</td> </tr> <tr> <td>2:0</td> <td>2:1</td> <td>2:2</td> <td>2:3</td> </tr> </table></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="6"> <p>不需要jQuery，用原生JS即可实现：</p> <pre><code>const table = document.querySelector('table'); const rows = document.querySelectorAll('tr'); const rowsArray = Array.from(rows); table.addEventListener('click', (event) => { const rowIndex = rowsArray.findIndex(row => row.contains(event.target)); const columns = Array.from(rowsArray[rowIndex].querySelectorAll('td')); const columnIndex = columns.findIndex(column => 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><script type="text/javascript"> $(document).ready(function(){ $('#example tbody').on( 'click', 'td', function () { alert('Row ' + $(this).closest("tr").index()); alert('Column ' + $(this).closest("td").index()); }); }); </script> </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(){ $('#example tbody').on('click', 'td', function () { alert('ColumnIndex:'+ $(this).parent().find('td').index(this)); alert('RowIndex:'+ $(this).parent().parent().find('tr').index($(this).parent())); }); }); </code></pre> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="example"><tbody> <tr><td>11</td><td>12</td></tr> <tr><td>21</td><td>22</td></tr> </tbody> </table></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <p>用这个</p> <pre><code>$(document).ready(function(){ $('#example tbody').on( 'click', 'td', function () { var column_num = parseInt( $(this).index() ); alert('column index:'+column_num ); var row_num = parseInt( $(this).parent().index() ); alert('rowindex:'+row_num ); }); }); </code></pre> </answer> </body></html>

javascript jquery html-table

回答 0 投票 0

html-table 相关问题

最新问题