html-table 相关问题

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

固定可滚动表格的标题

这是一个带有固定行和列的表格。我也试图通过固定标题来改进它。 IE。当您滚动表格时，标题不应滚动 - 它应该永久可见...

javascript jquery html css html-table

回答 3 投票 0

手机上的 HTML 表格滚动

我想让手机上的表格滚动。我知道它太大了 - 但我想滚动它。目前还不会。我试过 width=100% 没有运气...... 看起来像是一个简单的请求 - 奇迹......

css html html-table

回答 2 投票 0

使用javascript插入不规则表格的行

我有这张桌子： A. 指定模块... 我有这张桌子： <table class="w-full border "> <caption class="text-start mx-2 text-lg font-semibold"> A. Specify Modules to be developed or modified: </caption> <tbody> <tr> <th rowspan="3" scope="rowgroup" class="border-black border">1</th> <th scope="row" class="border-black border"><input type="text" placeholder="Module Name" class="placeholder:italic font-normal text-xs w-full p-1" /></th> </tr> <tr> <th scope="row" class="border-black border"><input type="text" placeholder="Module Description" class="placeholder:italic font-normal text-xs w-full p-1" /></th> </tr> </tbody> </table> 有没有办法插入一行 <th rowspan="3" scope="rowgroup" class="border-black border">1</th> 递增并通过此按钮插入：我尝试使用 jspreadsheet 但我希望可以通过仅使用 javascript 找到解决方案。让我们看看如何解决这个问题：我们可以有两种方法，一种用于添加新行，另一种用于删除行变量 rowIndex 可用于动态字段 id (id="moduleName_+rowIndex+" ）并为每行提供一个 id id="row_+rowIndex+" 我们可以简化表格 html 并为表格主体设置一个 id id="tableBody" 然后我们可以根据用户单击添加更多/删除来设置和删除表格行 var rowIndex = 1; const removeRow = (index) => { let elementToRemove = document.getElementById('row_'+index); if (elementToRemove) { elementToRemove.remove(); } else { console.log('Element not found.'); } } const addNewRow = () => { let removeLink = (rowIndex === 1) ? "" : `<a href="javascript:void(0)" onclick="removeRow(`+ rowIndex+`)" >remove</a>` let row = ` <tr id="row_`+rowIndex+`"> <td><input type="text" id="moduleName_`+rowIndex+`" placeholder="Module Name" class="placeholder:italic font-normal text-xs w-full p-1" /></td> <td><input type="text" id="moduleDescription_`+rowIndex+`" placeholder="Module Description" class="placeholder:italic font-normal text-xs w-full p-1" /> `+removeLink+`</td> </tr> `; let tableBody = document.getElementById("tableBody"); tableBody.innerHTML += row; rowIndex++; } document.addEventListener('DOMContentLoaded', function() { addNewRow(); }); <table class="w-full border"> <caption class="text-start mx-2 text-lg font-semibold"> A. Specify Modules to be developed or modified: </caption> <tbody id="tableBody"> <tr> <th>Module Name</th> <th>Module Description</th> </tr> </tbody> </table> <a href="javascript:void(0)" onclick="addNewRow()">Add More</a>

javascript html-table insert tailwind-css

回答 1 投票 0

如何在制表符中显示嵌套列表数据

我的屏幕上有一个搜索和列表面板。对于列表页面，我使用制表符，因为我想显示嵌套数据。 js文件代码：函数 onCheckClick() { var url = "/SomeContr...

javascript jquery asp.net-mvc html-table tabulator

回答 1 投票 0

<tbody> 不能作为 <div> 的子项出现并且 <div> 不能作为 <table>

请看一下我的桌子的示意结构。为了方便阅读，我删除了所有不必要的内容。正如您所看到的，有一个标题和一个正文。只有身体被包裹着

css html-table radix html-tbody

回答 1 投票 0

为什么我的 <td> 元素没有以 100vw 显示？

我正在学习 FreeCodeCamp 响应式网页设计课程。我正在模块“通过构建资产负债表了解有关 CSS 伪选择器的更多信息”第 53 步。第一个指令...

html css html-table width viewport

回答 1 投票 0

如何调整html表格边框和列宽？

我想改变html表格的样式。现在看起来像这样：这是代码：我想改变html表格的样式。现在看起来像这样：这是代码： <div className="student-schedule"> <table className="student-calendar-table"> <thead> <tr> <th className=''></th> {weekDays.map((day) => ( <th className='student-th border-left' colSpan={6} key={day}> {day} </th> ))} </tr> <tr> <th className=''></th> {dates.map((date) => ( <th className='student-th border-left' colSpan={6} key={date}> {date} </th> ))} </tr> </thead> <tbody> {timeSlots.map((time, i) => ( <tr key={time}> <td className='student-td cell'>{time}</td> {tableCells[i].map((cell, index) => { const cellsLen = cell.length; const tdElements = []; if (cellsLen < 4) { for (let j = 0; j < cellsLen; j++) { tdElements.push(<td onClick={() => handleCellClick(cell[j])} className={findCss(cell[j], j)} key={index + '-' + j} colSpan={6 / cellsLen}>{cell[j].isReserved ? cell[j].lessonWith : cell[j].lessonWith}</td>); } return tdElements; } else { return (<td onClick={() => OpenMultipleInstructorPopupVisible(cell)} className='student-td multiple-instructors student-block border-left' colSpan={6}>3+ osoby</td>); } })} </tr> ))} </tbody> </table> <div> {isReservationPopupVisible && <ReservationPopup onClose={closePopup} block={block} myReservations={myReservations} blocks={blocks} />} {isMultipleInstructorPopupVisible && <MultipleInstructorsPopup onClose={closePopup} blocks={extraInstructors} myReservations={myReservations} allBlocks={blocks} />} </div> </div> 和CSS：.student-th{ color: rgb(71, 71, 71); } .student-td { border-radius: 10px; border-right: 3px solid #dedbd9; border-left: 3px solid #dedbd9; border-top: 1px solid #dedbd9; border-bottom: 1px solid #dedbd9; color: rgb(71, 71, 71); box-sizing:content-box; } .student-calendar-table { border-collapse: separate; background-color: #dedbd9; margin: auto; width: 98%; border-radius: 30px; overflow: hidden; margin: 0 auto; } /* .border-left { border-left: 10px solid #f70b0b; } */ .cell { height: 80px; } .student-block { cursor: pointer; transition: background-color 0.3s; text-align: center; color: rgb(71, 71, 71); } findCss 函数所做的就是处理颜色。我一直在与两件非常糟糕的事情作斗争：为每列设置相同的宽度，无论列中有多少块每天栏之间的空格我希望它像下面的屏幕截图一样，其中列的宽度（标记为蓝色框）大小相同，并且列之间有很好的间隙，不会切割每列中第一个单元格的左边框（标记为红色）。现在，我通过为每个第一个单元格设置 border-left 来实现这个切割间隙，如下所示： .border-left { border-left: 10px solid #dedbd9; } 但这并不能解决问题，因为左侧被切掉了。我将不胜感激的帮助<div class="student-schedule"><table class="student-calendar-table"><thead><tr><th class=""></th><th class="student-th border-left" colspan="6" style="width: 200px;">Poniedziałek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Wtorek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Środa</th><th class="student-th border-left" colspan="6" style="width: 200px;">Czwartek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Piątek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Sobota</th><th class="student-th border-left" colspan="6" style="width: 200px;">Niedziela</th></tr><tr><th class=""></th><th class="student-th border-left" colspan="6" style="width: 200px;">13/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">14/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">15/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">16/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">17/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">18/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">19/11/2023</th></tr></thead><tbody><tr><td class="student-td cell">8:00</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-0 border-left" colspan="6">Paweł Jankowski</td><td class="student-td student-block instructor-0 border-left" colspan="6">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="6">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-3" colspan="3">Robert Maj</td></tr><tr><td class="student-td cell">10:00</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td not-available student-block-unavailable" colspan="2">Aneta Gajos</td><td class="student-td not-available student-block-unavailable" colspan="2">Krzysztof Wiśniewski</td><td class="student-td reserved-by-me student-block" colspan="2">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="3">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1 border-left" colspan="3">Aneta Gajos</td><td class="student-td student-block instructor-2" colspan="3">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">12:00</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td not-available student-block-unavailable" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-0" colspan="2">Paweł Jankowski</td><td class="student-td not-available student-block-unavailable border-left" colspan="2">Aneta Gajos</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td not-available student-block-unavailable" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">14:00</td><td class="student-td not-available student-block-unavailable border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td not-available student-block-unavailable" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td not-available student-block-unavailable" colspan="2">Paweł Jankowski</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">16:00</td><td class="student-td not-available student-block-unavailable border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-2 border-left" colspan="3">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="3">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-0" colspan="2">Paweł Jankowski</td><td class="student-td not-available student-block-unavailable border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">18:00</td><td class="student-td not-available student-block-unavailable border-left" colspan="6">Paweł Jankowski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-2 border-left" colspan="3">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="3">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-3 border-left" colspan="6">Robert Maj</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">20:00</td></tr></tbody></table><div></div></div> 这非常具有挑战性，但我失败了。我能做的最好的事情就是使用 width 和 min-width 来平衡列，并使用伪元素在您想要更宽间隙的地方添加边框。 .student-th{ color: rgb(71, 71, 71); width:calc(100% / 7); max-width:calc(100% / 7); min-width:calc(100% / 7); border-right: 3px solid #dedbd9; border-left: 3px solid #dedbd9; border-top: 1px solid #dedbd9; border-bottom: 1px solid #dedbd9; } .student-td { border-radius: 10px; border-right: 3px solid #dedbd9; border-left: 3px solid #dedbd9; border-top: 1px solid #dedbd9; border-bottom: 1px solid #dedbd9; color: rgb(71, 71, 71); box-sizing:content-box; background-color: rgb(200, 200, 71); width:calc(100% / 43); min-width:calc(100% / 43); overflow-wrap: anywhere; } .student-calendar-table { border-collapse: separate; background-color: #dedbd9; margin: auto; width: 98%; border-radius: 30px; overflow: hidden; margin: 0 auto; } .border-left { position:relative; } .border-left:before { content: ""; display: block; border-radius: 10px; background: #7d7d7d; position: absolute; top: 0; bottom: -4px; left: -5px; width: 2px; } .cell { height: 80px; } .student-block { cursor: pointer; transition: background-color 0.3s; text-align: center; color: rgb(71, 71, 71); } <div class="student-schedule"><table class="student-calendar-table"><thead><tr><th class=""></th><th class="student-th border-left" colspan="6" style="width: 200px;">Poniedziałek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Wtorek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Środa</th><th class="student-th border-left" colspan="6" style="width: 200px;">Czwartek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Piątek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Sobota</th><th class="student-th border-left" colspan="6" style="width: 200px;">Niedziela</th></tr><tr><th class=""></th><th class="student-th border-left" colspan="6" style="width: 200px;">13/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">14/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">15/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">16/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">17/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">18/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">19/11/2023</th></tr></thead><tbody><tr><td class="student-td cell">8:00</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-0 border-left" colspan="6">Paweł Jankowski</td><td class="student-td student-block instructor-0 border-left" colspan="6">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="6">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-3" colspan="3">Robert Maj</td></tr><tr><td class="student-td cell">10:00</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td not-available student-block-unavailable border-left" colspan="2">Aneta Gajos</td><td class="student-td not-available student-block-unavailable" colspan="2">Krzysztof Wiśniewski</td><td class="student-td reserved-by-me student-block" colspan="2">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="3">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1 border-left" colspan="3">Aneta Gajos</td><td class="student-td student-block instructor-2" colspan="3">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr></tr></tbody></table><div></div></div> 我建议完全重写它以使用 css grid 代替！

html css reactjs html-table

回答 1 投票 0

为什么innerText在继承自HTMLElement的HTMLTableCellElement实例上不可用？

我正在尝试从表格中的单元格获取纯文本。在一行 (HTMLTableRowElement) 中，我使用了 row.cells，它返回 [HtmlTableCellElement] 数组。 HTMLTableCellElement 继承自

javascript html html-table

回答 1 投票 0

如何使我的 HTML 模板适用于 1 个以上的表？

我制作了一个 HTML 文件，其中包含表格模板。 **#标题在这里#** **#表格标题... 我制作了一个 HTML 文件，其中包含表格模板。 <body> **#HeadingGoesHere#** <table> <thead> <tr> **#TableHeading#** </tr> </thead> <tbody> **#TableBody#** </tbody> <tfoot> **#TableTotals#** </tfoot> </table> </body> 我有一个 PHP 程序，它使用 str_replace 来填充表。这对于创建 1 个表非常有用，但是我需要为 1 个或多个表实现此功能。使用我的 HTML 模板，我认为这是不可能的，因为当我需要创建 1 个或多个表时，它只允许创建一个表。我对 HTML 和 PHP 不太有经验，所以我不确定是否有办法使用 HTML 模板来做到这一点，但我还没有找到任何东西。我会选择使用 DOM 的现有解决方案。这将为您提供所需的灵活性，并确保您输出的 HTML 格式良好。下面的这个基本示例展示了如何开始，并创建一个可重用的类，您可以使用它在任何项目中生成任何表。 <?php class table extends DomDocument{ /** * This variable holds the table * @access private */ private $table; /** * Constructor, sets up the root element */ public function __construct(){ parent::__construct(); $table = self::createElement('table'); $this->table = parent::appendChild($table); } /** * Appends a child to the root node ($table) * @access public * @param domNode $child * @return void */ public function appendChild(domNode $child):void { $this->table->appendChild($child); } /** * Returns a string representation of the table * @access public * @return string */ public function __toString() :string{ return parent::saveHTML(); } } $table = new table; // create the <thead> $thead = $table->createElement('thead'); // create the table column headings $th = $table->createElement('th', 'Heading 1'); $thead->appendChild($th); $th = $table->createElement('th', 'Heading 1'); $thead->appendChild($th); $th = $table->createElement('th', 'Heading 1'); $thead->appendChild($th); // add the head to the table // create the <tbody> $tbody = $table->createElement('tbody'); // create a table row $tr = $table->createElement('tr'); // create a table data cell $td = $table->createElement('td', 'Col1 Row 1'); $tr->appendChild($td); $td = $table->createElement('td', 'Col2 Row 1'); $tr->appendChild($td); $td = $table->createElement('td', 'Col3 Row 1'); $tr->appendChild($td); // add the above row to the tbody $tbody->appendChild($tr); // create a second table row $tr = $table->createElement('tr'); // create a table data cell $td = $table->createElement('td', 'Col1 Row 2'); $tr->appendChild($td); $td = $table->createElement('td', 'Col2 Row 2'); $tr->appendChild($td); $td = $table->createElement('td', 'Col3 Row 2'); $tr->appendChild($td); // add the above row to the tbody $tbody->appendChild($tr); // create the <tfoot> $tfoot = $table->createElement('tfoot'); // create the table column headings $th = $table->createElement('th', 'Foot 1'); $thead->appendChild($th); $th = $table->createElement('th', 'Foot 2'); $thead->appendChild($th); $th = $table->createElement('th', 'Foot 3'); $tfoot->appendChild($th); // add the thead to the table $table->appendChild($thead); // add the tbody to the table $table->appendChild($tbody); // add the tfoot to the table $table->appendChild($tfoot); echo $table;

php html html-table

回答 1 投票 0

jQuery 执行时间和 SweetAlert 加载（项目特定问题）

我一直在从事数据转换项目。在处理小数据集时，我在代码执行方面取得了成功。然而，当处理较大的数据集时，JavaScript 执行...

javascript jquery html-table sweetalert2 execution-time

回答 1 投票 0

如何实现粘性且水平滚动的表头

tldr：尝试下面的代码片段，有没有办法在没有（或更少）js的情况下实现它？我得到了一些有一些要求的用户界面：带有粘性顶部标题的表格内容相当广泛，所以整个...

javascript html css layout html-table

回答 1 投票 0

将图像插入 HTML 中的表格单元格中

我发现将图像插入表格单元格很困难。当我尝试用图像完全填充表格单元格时，表格单元格的大小不断增加并占据整个...

css html html-table css-tables

回答 4 投票 0

如何在 Angular 中实现以下表格设计

我有一个对象数组，因此我正在执行 ng for 来显示该数组中的各个对象。但我想要实现的是最后一列不应该是 ngFor 行重复的一部分。相反...

html angular html-table

回答 1 投票 0

将 HTML 表格数据转换为转置的二维数组

我需要从 HTML 表中抓取数据并将柱状数据定位为二维数组的行。我的代码没有显示正确的结构。 HTML 表格：我需要从 HTML 表中抓取数据并将柱状数据定向为二维数组的行。我的代码未显示正确的结构。 HTML 表格： <html> <head> </head> <body> <table> <tbody> <tr> <td>header</td> <td>header</td> <td>header</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> </tbody> </table> </body> </html> PHP 代码： $DOM = new \DOMDocument(); $DOM->loadHTML($valdat["table"]); $Header = $DOM->getElementsByTagName('tr')->item(0)->getElementsByTagName('td'); $Detail = $DOM->getElementsByTagName('td'); //#Get header name of the table foreach($Header as $NodeHeader) { $aDataTableHeaderHTML[] = trim($NodeHeader->textContent); } //print_r($aDataTableHeaderHTML); die(); //#Get row data/detail table without header name as key $i = 0; $j = 0; foreach($Detail as $sNodeDetail) { $aDataTableDetailHTML[$j][] = trim($sNodeDetail->textContent); $i = $i + 1; $j = $i % count($aDataTableHeaderHTML) == 0 ? $j + 1 : $j; } //print_r($aDataTableDetailHTML); die(); //#Get row data/detail table with header name as key and outer array index as row number for($j = 0; $j < count($aDataTableHeaderHTML); $j++) { for($i = 1; $i < count($aDataTableDetailHTML); $i++) { $aTempData[][$aDataTableHeaderHTML[$j]][] = $aDataTableDetailHTML[$i][$j]; } } $aDataTableDetailHTML = $aTempData; echo json_encode($aDataTableDetailHTML); 我的结果： [{"header":["content"]},{"header":["test"]},{"header":["content"]},{"header":["test"]},{"header":["content"]},{"header":["test"]}] 我们需要这样的结果： [ ["header","content","test"], ["header","content","test"], ["header","content","test"] ] 我更改了很多代码以（希望）简化它。这分两个阶段进行，第一个是提取 <tr> 元素并构建每行中所有 <td> 元素的数组 - 将结果存储到 $rows。其次是通过循环第一行来垂直捆绑数据，然后使用 array_column() 从所有行中提取相应的数据... $trList = $DOM->getElementsByTagName("tr"); $rows = []; foreach ( $trList as $tr ) { $row = []; foreach ( $tr->getElementsByTagName("td") as $td ) { $row[] = trim($td->textContent); } $rows[] = $row; } $aDataTableDetailHTML = []; foreach ( $rows[0] as $col => $value ) { $aDataTableDetailHTML[] = array_column($rows, $col); } echo json_encode($aDataTableDetailHTML); 测试数据给出... [["header","content","test"],["header","content","test"],["header","content","test"]] 我添加了一些额外的代码，它将 $aDataTableDetailHTML 数组分成两个值，然后添加键，在本例中为“header” //There are two elements that are not "header" $aDataTableDetailHTML = array_chunk($aTempData, 2); //For every item in the array foreach($aDataTableDetailHTML as $key=>$tag){ //Dynamically get the name, in this case, "header" $tagName = array_keys( $tag[0] )[0]; //Start an array containing the tagname ("header") $tagOut = array( $tagName ); //Add the two values onto the array $tagOut[] = $tag[0][$tagName][0]; $tagOut[] = $tag[1][$tagName][0]; //Drop the keys from the array $aDataTableDetailHTML[$key] = array_values( $tagOut ); } echo json_encode($aDataTableDetailHTML); 这给了我输出： [ [ "header", "content", "test" ], [ "header", "content", "test" ], [ "header", "content", "test" ] ] 这似乎符合您的需求。希望这有帮助。我还测试了一些附加值，并且该模式继续存在。我知道这个答案来晚了，但我为此目的开发了一个包。它被称为TableDude。对于您的情况，这个 PHP 片段将起作用。 // Including TableDude require __DIR__ . "/../src/autoload.php"; $html = "<html> <head> </head> <body> <table> <tbody> <tr> <td>header</td> <td>header</td> <td>header</td> </tr> <tr> <td>content</td> <td>content</td> <td>content</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> </tbody> </table> </body> </html>"; // Parses the HTML to array table $simpleParser = new \TableDude\Parser\SimpleParser($html); $parsedTables = $simpleParser->parseHTMLTables(); if(count($parsedTables) > 0) { $firstTable = $parsedTables[0]; $tableOrderedByColumn = \TableDude\Tools\ArrayTool::swapArray($firstTable); print_r($tableOrderedByColumn); } // This would output /* array( array("header", "content", "test"), array("header", "content", "test"), array("header", "content", "test") ) */ 要维护行和单元格之间的父子关系，请在 td 标签上下文中访问 tr 标签。转置数据结构是通过将第一级键与第二级键交换来完成的。代码：（演示） $dom = new DOMDocument(); $dom->loadHTML($html); $result = []; foreach ($dom->getElementsByTagName('tr') as $i => $row) { foreach ($row->getElementsByTagName('td') as $c => $cell) { $result[$c][$i] = $cell->nodeValue; } } var_export($result);

php arrays html-table html-parsing transpose

回答 4 投票 0

在表格上结合搜索和复选框 javascript 过滤器

我在 html 表格上有一个搜索过滤器和复选框过滤器，它们都运行良好，但它们独立工作。我希望能够检查一个类别，然后使用...中的搜索框

javascript jquery function filter html-table

回答 1 投票 0

使用Javascript下载xlsx格式的Excel文件（将html表格导出到Excel）

我使用 JS、HTML 和 CSS 来构建我的应用程序并将其托管在服务器上。我使用以下代码将所有 html 表导入到 xls 格式的 Excel 文件中。函数 fnExcelReport(表...

javascript excel server html-table export-to-excel

回答 2 投票 0

将 HTML 表格转换为列数组 PHP

如何将 HTML 表格转换为 PHP 数组列？有一个 HTML 表和一个 php 代码，但我无法得到想要的结果。下面带来了我的例子和期望的结果。我写了ph...