由于它与HTML有关，因此表格用于以表格方式显示数据。关于HTML表的问题应该通过显示有问题的源代码来询问，或者，如果问题是关于根据需求创建表失败的尝试，提问者需要显示失败的尝试，描述期望和行为如何不同。
我已经在figma中设计了这个表格，现在我需要用HTML构建它。但是，我不确定如何让错误消息跨越单元格下方的表格行，如图所示。 当...
我希望能够让标题行（顶部）中的每个单元格保持相同的宽度（以像素为单位），无论底部的表格是什么。该图像显示了底部有 12 列的示例...
在我的表格中，我已经实现了在选择单元格时突出显示行/列的逻辑，但我似乎无法正确获取列顶部和底部的边框。机器人的边框...
沙箱：https://codepen.io/test41564/pen/mdzaRrV .tableFixHead 表 { 边界崩溃：崩溃； 宽度：100%； } .tableFixHead th, .tableFixHead td { 内边距：8 像素 16 像素； } td：第一个孩子...
使用 Tailwind CSS 将类动态应用到 Table TR 元素的奇数/偶数行的正确方法是什么
尝试在我的 tailwindcss 样式页面中替换行颜色，下面的代码对我的没有影响： tr:nth-child(偶数) { 类=“bg-gray-50”； } ...</desc> <question vote="15"> <p>尝试在我的 tailwindcss 样式页面中替换行颜色，下面的代码对我的 <tr>s:</p> 没有影响 <pre><code><style> tr:nth-child(even) { class="bg-gray-50"; } tr:nth-child(od) { class="bg-white"; } </style> </code></pre> <p>请问我错过了什么？</p> </question> <answer tick="false" vote="30"> <p>将 <pre><code>even</code></pre> 和 <pre><code>odd</code></pre> 前缀添加到您的班级列表</p> <pre><code><tbody> <tr class="even:bg-gray-50 odd:bg-white"></tr> </tbody> </code></pre> <p>请参阅其文档中的<a href="https://tailwindcss.com/docs/hover-focus-and-other-states#first-last-odd-and-even" rel="noreferrer">第一个、最后一个、奇数和偶数</a> </p> </answer> <answer tick="false" vote="8">正如 stefan.at.wpf 提到的，你应该像这样扩展你的 tailwind 配置：<p> </p><code>// tailwind.config.js module.exports = { // ... variants: { extend: { backgroundColor: ['even'], } }, } </code><pre> </pre>然后你甚至可以在你的课堂上使用：<p> </p><code><tr class="even:bg-grey"> </code><pre> </pre> </answer> <answer tick="false" vote="4">Tailwindish 方法是使用 <p><code>even:someclass</code><pre> 或 </pre><code>odd:someclass</code><pre>。需要先启用，查看详情</pre>这里<a href="https://tailwindcss.com/docs/hover-focus-and-other-states#even-child" rel="nofollow noreferrer"></a> </p> </answer> <answer tick="false" vote="4">在我看来，您正在混合 CSS 样式和 HTML 类。你必须选择其中之一。假设 <p><code>.bg-gray-50</code><pre> 对应于 </pre><code>#ccc</code><pre>，您可以按如下方式应用样式：</pre> </p><code>tr:nth-child(even) { background-color: #ccc; } tr:nth-child(odd) { background-color: #fff; } </code><pre> </pre> </answer> <answer tick="false" vote="1">您正在尝试将 css 类设置为 css 标签。<p> </p>另外我建议你将 <p><code>border-collapse: collpase;</code><pre> 设置到你的桌子上，这样，你的单元格之间就不会有分离。</pre> </p>您必须像下面的演示一样直接设置CSS：<p> </p><p></p> <div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div><code>table{ border-collapse: collapse; } tr:nth-child(even) { /*class="bg-gray-50";*/ background: gray; } tr:nth-child(od) { /* class="bg-white";*/ background: white; }</code><pre> </pre><code><table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table></code><pre> </pre> </div> </div><p> </p> </answer> <answer tick="false" vote="1">您可以使用 @apply 来实现此目的，然后列出您想要应用于相关元素的 tailwind 类。<p> </p><code>tr:nth-child(even) { @apply bg-blue-50; } </code><pre> </pre> </answer></body>
有没有办法让从 Excel 电子表格导出时可以对 HTML 表格进行排序？
为了清楚起见，所讨论的电子表格是我的翻唱乐队表演的所有歌曲的曲目列表，其中包含歌词和和弦的超链接。我可以在 Excel 中很好地对其进行排序，但在
我有三张专辑（Red、Ronan 和 The Hunger Games），我想在 HTML 表格中的分组专辑名称下显示它们的歌曲。 我的未分组数据： 大批 ( [0] => 数组 ( ...
我什至不知道如何正确地提出问题，否则我可能会找到答案。所以，我会尽力解释。 我正在使用一个名为 SLDB 的脚本（我没有写...
将 Html 表单信息存储到数组对象中并将其显示在表单下方的表格中[关闭]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href=""> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <style>body{padding-top:50px;}.starter-template{padding:40px 15px;text-align:center;}</style> <link rel="stylesheet" type="text/css" href="createdesign.css"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="Newsfeed.html">NPSS Announcements</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="Newsfeed.html">Newsfeed</a></li> <li><a href="Create.html">Create</a></li> <li><a href="Calender.html">Calender</a></li> <li><a href="login.html">Logout</a></li> </ul> </div><!--.nav-collapse --> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <h1>Create A New Announcement</h1> <form action="action_page.php"> Announcement Title: <input type="text" name="ATitle" size="50"> <br> Descritption:<br> <br> <input type="radio" name="sex" value="male" checked>Male <input type="radio" name="sex" value="female" checked>Female <br> When is the Meeting?<input type="datetime-local" name="Awhen" </input> <br> Where is the Meeting<input type="text" name="Awhere"></input> </form> </body> </html> 我试图将 中的所有信息（例如公告标题、描述、性别和时间）放入一个数组（JS）中，以便稍后检索它们并在其他位置显示信息。我是一名初学者程序员，所以请解释一下！我很感谢您的帮助！ 您需要了解的基础是您可以访问这些元素并获取它们的值。然后你可以将它们放入一个数组中。以下是如何获取单个元素的值并将其放入数组中。 var myFormData = []; //declare an array var value1 = document.getElementById("myTextInput").value; //get the value of an element by it's id myFormData.push(value1); //put to the array 接下来，有一些快捷方式可以同时对多个元素执行此操作。 您可以向所有表单字段添加一些类，例如 myInputs，并使用查询选择器将它们一次性添加到类似数组的列表中。 以下是如何按类别选择多个元素。 var myFormInputs = document.getElementsByClassName("myInputs") 现在 myFormInputs 是一个类似数组的列表。 您可以在 filter 上调用 myFormInputs 函数并获取它们的值。 var myFormData = Array.prototype.filter.call(myFormInputs, function(anElement) { return anElement.value; }) 内部函数是按元素调用的 - 所以我们可以返回它的值。现在使用所有这些值创建了 myFormData 数组。 有很多更短的方法可以做到这一点。您可以使用一些优雅的库（例如 JQuery）来实现快速开发和更短的代码。但以上是所有的构建块。 也不要忘记了解JS对象。 既然你使用的是 jQuery，我就看看 .serialize()。这可能是将表单数据放入 JavaScript 数组的最简单方法。 https://api.jquery.com/serialize/ 或者，您可以构建自己的数组，但我认为由于您是“初学者”，序列化将为您完成所有这些工作。 当您支持 IE10+ 时，您应该真正研究一下 FormData 对象，这确实是很酷的东西。它拥有您错过的所有支持。现在，您可以发送自定义的不存在的表单，而无需使用 jQuery 创建表单，例如： var form = new FormData(); form.append( 'uploaded_file', $('input[type=file]')[0].files[0] ); form.append( 'description', 'I am a cool file, you know...' ); $.ajax({ url: 'http:/whatev.er/', type: 'POST', processData: false, contentType: false, dataType: 'json', success: function(data) { alert('I just uploaded a file with an AJAX-call so I do not have to refresh the page! Wooo!'); } }); 您可以使用 jQuery 的 .serializeArray()。 这是将表单数据转换为数组/对象的方法： $("#formid").serializeArray(); 这就是将数据放回表单的方法： $.each(form_data, function(n, el) { // n is just a number identifying it $("#testform input[name='"+el.name+"']").val(el.value); }); 工作演示：https://jsfiddle.net/egbar7r5/
我有一张下表。第二行定义了三列，一列的 colspan=8，另一列的 colspan=1。尽管如此，单元格并没有根据 colspan 进行拉伸，“widt...
使用“rowspan”或“colspan”过滤包含合并单元格的表格中的文本
我有一个 HTML 代码，我希望 filterTable() 函数在 searchInput 中输入内容后过滤 myTable 表。 例如，如果我输入“Rafael”，相关行应该是
将 html 表格转换为 CSV 的脚本（最好是 python）
我有大量 html 表格，我想将其转换为 CSV。将单个表格粘贴到 Excel 中并将其另存为 .csv 可以工作，就像将 html 表格粘贴到简单的在线转换器中一样...
我有一个多维数组，我想根据值的共同值将它们分组在一起。基本上我正在创建一个程序，您可以在其中从不同的供应商订购零件并且......
从这个线程中，我被建议使用嵌套表，该表反过来执行预期的操作/功能。 <... 从此线程，建议我使用嵌套表，该表又执行预期的操作/功能。 <table> <thead class="center"> <tr> <th><a href="viewfaculty?columnName=professor_id">ID</a></th> <th><a href="viewfaculty?columnName=professor_last_name">L. Name</a></th> <th>F. Name</th> <th>M. Name</th> <th>Sex</th> <th><a href="viewfaculty?columnName=professor_employment_status">Empl. Status</a></th> <th><a href="viewfaculty?columnName=professor_department">Dept.</a></th> <th>Modify</th> </tr> </thead> <tbody> <c:forEach var="professor" items="${facultyList}"> <tr> <td> <form action="savechanges" method="post"> <table> <tr> <td align="center">${professor.profId}</td> <td>${professor.profLastName}</td> <td>${professor.profFirstName}</td> <td>${professor.profMiddleName}</td> <td align="center">${professor.profSex}</td> <td align="center">${professor.profEmplStatus}</td> <td align="center">${professor.profDept}</td> <td align="center"> <c:choose> <c:when test="${professor.profEmplStatus.equals('FULL')}"> <select name="profEmplStatus" required> <option value="FULL" selected>FULL</option> <option value="PART">PART</option> <option value="RET">RET</option> <option value="TRMTD">TRMTD</option> </select> </c:when> <c:when test="${professor.profEmplStatus.equals('PART')}"> <select name="profEmplStatus" required> <option value="FULL">FULL</option> <option value="PART" selected>PART</option> <option value="RET">RET</option> <option value="TRMTD">TRMTD</option> </select> </c:when> <!-- more <c:when> --> </c:choose> </td> <td align="center"> <c:choose> <c:when test="${professor.profDept.equals('BSCS-SE')}"> <select name="profDept" required> <option value="BA-MMA">BA-MMA</option> <option value="BFDT">BFDT</option> <option value="BS-AN">BS-AN</option> <option value="BS-GPD">BS-GPD</option> <option value="BSBA-FM">BSBA-FM</option> <option value="BSBA-MKT">BSBA-MKT</option> <option value="BSCS-SE" selected>BSCS-SE</option> <option value="BSIT-WD">BSIT-WD</option> <option value="GENED">GENED</option> </select> </c:when> <c:when test="${professor.profDept.equals('GENED')}"> <select name="profDept" required> <option value="BA-MMA">BA-MMA</option> <option value="BFDT">BFDT</option> <option value="BS-AN">BS-AN</option> <option value="BS-GPD">BS-GPD</option> <option value="BSBA-FM">BSBA-FM</option> <option value="BSBA-MKT">BSBA-MKT</option> <option value="BSCS-SE">BSCS-SE</option> <option value="BSIT-WD">BSIT-WD</option> <option value="GENED" selected>GENED</option> </select> </c:when> <!-- more <c:when> --> </c:choose> </td> <td class="center"> <input type="hidden" name="profId" value="${professor.profId}" /> <input type="submit" value="Save" /> </td> </tr> </table> </form> </td> </tr> </c:forEach> </tbody> </table> 表格看起来很混乱，如以下屏幕截图所示： 如何做到这一点才能达到最初的预期？ html 设计有嵌套表格，其中在外部表格的单元格内包含 form 标签。从浏览器中输出的图片中，您可以看到嵌套表占用了属于第一列的空间。但您需要两个表具有相同的列数。计算嵌套表中的列数，并使用 colspan 标签的 <td> 属性来展开一个单元格以占用专用于外部表其他列的空间。 <td colspan="10" align="right" valign="top"> <form action="savechanges" method="post"> <table style="width:100%;" cellspacing="0" cellpadding="0" border="0">
我有一个正在使用 Bootstrap 的静态 PHP 网站。这些表由 Bootstrap 控制。 我注意到我似乎无法控制 TD 部分的长度，因此我可以防止...
AJAX 代码工作正常并创建我想要的输出并“成功” 成功：函数（数据）{ 控制台.log(数据); $( "#gridjs_table" ).load(window.location.href +...
如何在某个<td>内选择某个<tr>的值/innerHTML？仅使用 JavaScript。没有 jQuery
<table> <tr> <td>foo1</td> <td>bar1</td> <td><input type="button" id="button1" onClick="get(this);"></td> </tr> <tr> <td>foo2</td> <td>bar2</td> <td><input type="button" id="button2" onClick="get(this);"></td> </tr> </table> 目标： 获取按钮 button1 和 button2 来触发相同的 function get()，这应该在按钮所在的同一个 <td> 中获取第一个 <tr> 的值。在本例中就是这样：分别是foo1和foo2。 这是该功能的粗略轮廓，应该有助于理解我想要实现的目标 - function get(element){ alert(element.tr.first_td.innerHTML); } 我意识到有一个 jQuery 解决方案可以解决类似的问题。但我对 jQuery 的理解还不够深入，无法将其翻译回 JavaScript。如果可以使用 JavaScript，请告诉我如何操作。 向上爬行 parentNode 两次以到达 tableRow 元素。从那里，访问单元格 HTMLCollection 中的第一个 td，并获取 innerHTML 值： function find( element ) { alert( element.parentNode.parentNode.cells[0].innerHTML ); } 小提琴：http://jsfiddle.net/jonathansampson/WuWnw/ 试试这个，因为你有很多 tr 和 td 标签，所以，你可以进行 DOM 解析。但是您需要为该表指定一个 ID 才能获取该表。现在我们称其为foo-table。 var table = document.getElementById("foo-table"); var cells = table.getElementsByTagName("td"); for (var i = 0; i < cells.length; i++) { alert(cells[i].innerHTML); } 如果你不想提供 ID 并且你确定只有一张桌子，那么使用这个： var table = document.getElementsByTagName("table"); var cells = table[0].getElementsByTagName("td"); for (var i = 0; i < cells.length; i++) { alert(cells[i].innerHTML); } 享受吧！希望这有帮助！ :) 没有 jQuery 或任何其他插件。纯 JavaScript。 :) <table> <tr> <td id="button1_value">foo1</td> <td>bar1</td> <td><input type="button" id="button1" onClick="get('button1_value');"></td> </tr> <tr> <td id="button2_value">foo2</td> <td>bar2</td> <td><input type="button" id="button2" onClick="get('button2_value');"></td> </tr> </table> 您应该使用 ID 来识别您想要获取的内容，以便您可以轻松检索它。这也有助于防止获得错误数据的机会。如果你给组件一个 id，你应该能够使用 document.getElementById() 来获取该组件。 function get(element){ var obj = document.getElementById(element) alert(obj.innerHTML); } 这真的很简单：$(this).closest('td').next('td')[0].innerHTML; 假设您有以下 html 并希望在单击第一个具有删除类的 TD 时获取下一个 td： <tr class="mytr"> <td> <div class="delete"><i class="fas fa-times"></i></div> </td> <td>12455</td> <td>4454646</td> <td>John</td> <td>9/4/24</td> </tr> JS： $(document).on("click", ".delete", function () { var removedid = $(this).closest('td').next('td')[0].innerHTML; console.log(removedid); }); foo1 栏1
我有一个有 6 列的表格。在其中一个行单元格中，我使用文本区域元素来显示和捕获用户输入。 目前，文本区域内的内容被截断，并出现一个椭圆...
我有一个 Blazor 组件，可以在 div 内呈现表格（请参阅下面的代码）。 div 有一个 id 将其绑定到 CSS，该 id 指定具有 max-height 和 max-width 属性的overflow:auto。 桌子...