html5-data 相关问题


jQuery HTML5 范围滑块中的实时输出

我正在尝试将 HTML5 输入范围滑块的实时输出获取到 JavaScript 变量中。现在,我正在使用 我的方式就是这样


HTML5 日期选择器有样式选项吗?

我对 HTML5 日期选择器非常感兴趣。 需要注意的是,我没有看到或预见到将颜色应用于选择器本身的方式,这将利用日期选择器 ki...


创建 React Native 应用程序以从 Web/API 付费或免费获取和玩 HTML5 游戏

我正在开发一个 React Native 项目,我想构建一个应用程序,允许用户玩从网络或 API 获取的 HTML5 游戏。我对 React Native 比较陌生,我正在寻求指导......


HTML4 和 HTML5 - 如何在不导航的情况下判断是否有可用的“后退”状态?

是否可以在不导航的情况下判断是否有可用的后退状态(即浏览器中的后退按钮是否可单击)? 如果可能的话,我希望能够在 HTML4 和 HTML5 中执行此操作。 我...


提示用户在移动站点启用GPS

我正在使用 HTML5 Geolocation API 来获取用户的当前位置,当用户启用 GPS 和位置服务时,一切正常。但当它关闭时,我是否可以


如何删除颜色输入的边框?

我使用 JavaScript 生成的 HTML5 颜色选择器元素来让用户设置另一个元素的颜色。当浏览器执行 input type="color" 时,它会绘制一个显示


Javascript:删除 HTML 颜色选择器边框

我使用 Javascript 生成的 HTML5 颜色选择器元素来让用户设置另一个元素的颜色。当浏览器执行时,它会绘制一个显示当前所选颜色的矩形。我...


Javascript:如何获取单击按钮的innerHTML

构建了一个小费计算器,但希望通过获取正在单击的按钮的innerHTML来缩短代码。 账单总额: 构建了一个小费计算器,但想通过获取正在单击的按钮的innerHTML来缩短代码。 Total Bill: <input id="bill" type="text"> <button type="button" onclick="tip15()">15</button> <button type="button" onclick="tip18()">18</button> <button type="button" onclick="tip20()">20</button> <div id="tip">You owe...</div> function tip15(){ var totalBill = document.getElementById("bill").value; var totalTip = document.onclick.innerHTML var tip = totalBill * 0.15; document.getElementById("tip").innerHTML = "&#36;" +tip } 这种方法的问题是我必须写出三个版本的函数来与小费金额相对应。我想创建一个函数来获取被单击按钮的innerHTML 并在函数中使用该值。我希望它看起来像这样 function tip(){ var totalBill = document.getElementById("bill").value; **var totalTip = GET INNERHTML OF CLICKED BUTTON** var tip = totalBill * ("." + totalTip); document.getElementById("tip").innerHTML = "&#36;" +tip } 这样我就可以在不同的按钮上运行相同的功能。 使用 HTML5 数据属性。 <button type="button" data-tip="15" onclick="getTip(this)">15</button> 您传递给函数的参数this指的是正在单击的按钮。然后你就可以得到这样的属性值: function tip(button){ var tip= button.getAttribute("data-tip"); ... } 剩下的留给你了。 像这样改变:将值传递给tip函数。 <button id="15" type="button" onclick="tip(15)">15</button> <button id="18" type="button" onclick="tip(18)">18</button> <button id="20" type="button" onclick="tip(20)">20</button> function tip(tip_value) { /*use here tip_value as you wish you can use if condition to check the value here*/ var totalBill = document.getElementById("bill").value; var totalTip = tip_value; var tip = totalBill * ("." + totalTip); document.getElementById("tip").innerHTML = "&#36;" +tip; } 将 this.innerHTML 作为参数传递给您的小费函数。 所以你的小费函数应该是这样的: function tip(totalTip) { var totalBill = document.getElementById("bill").value; var tip = totalBill * ("." + totalTip); document.getElementById("tip").innerHTML = "&#36;" +tip } 因此,如果您有一个如下所示的按钮元素: <button type="button" onclick="tip(this.innerHTML)">15</button> 提示函数将被称为 tip(15)。 我会写一个快速解决方案,然后解释为什么我这样做。 建议的解决方案 第 1 部分,HTML <div id="tip-wrapper"> <label for="bill">Total bill:</label> <input name="bill" id="bill" type="text"> <br/> <label for="tipratio">Tip ratio:</label> <button name="tipratio" value="15" type="button">15%</button> <button name="tipratio" value="18" type="button">18%</button> <button name="tipratio" value="20" type="button">20%</button> <div id="final-value">You owe...</div> </div> 第 2 部分,JavaScript var parent = document.getElementById('tip-wrapper'), buttons = parent.getElementsByTagName('button'), max = buttons.length, i; // function that handles stuff function calculate (e) { var bill = document.getElementById('bill'), tipRatio = e.target.value; document.getElementById('final-value').textContent = bill.value * (1+tipRatio/100); } // append event listeners to each button for(i = 0; i < max; i++) { buttons[i].addEventListener('click', calculate, true); } 说明 关于 HTML,并没有“太多”改变。唯一的事情是我使用的东西更符合标准。 我添加了一个 wrapper 元素,这只是为了隔离一些 DOM 遍历,而不是遍历整个文档对象来进行查找(这将加快您的脚本速度)。 您的按钮使用“值”属性,这是最好的。因为您可以以一种方式显示按钮文本,但使用正确的值(请参阅我添加了 % 字符)。 除此之外,我主要添加了适当的标识符和标签。 JavaScript,这是我将更详细地介绍的地方,我将逐步介绍: 您在脚本中要做的第一件事是设置您需要的变量(并获取您将使用的 DOM 元素。这就是我在前 4 行代码中所做的事情。 创建一个通用函数来处理您的计算并更新您的元素,无论其数值如何。我在这里使用的功能是向您的函数添加一个参数 (e),因为 javascript 中的 EVENTS 将 EVENT OBJECT 附加到您的回调函数(在本例中为 calculate();)。 EVENT OBJECT 实际上有很多有用的属性,我使用其中的: target:这是触发事件的元素(即您的按钮之一) 我们所要做的就是获取目标值 (e.target.value) 并将其用于返回最终账单的数学中。 使用addEventListener。人们普遍认为应该将 JavaScript 保留在 HTML 之外,因此不鼓励使用旧的事件方法 (onclick="")。 addEventListener()方法并不太复杂,不做详细介绍,其工作原理如下: htmlObject.addEventListener('事件类型', '回调函数', '冒泡true/false'); 我所做的只是循环遍历所有按钮并附加事件 lsitener。 结束语 使用此脚本,您现在可以添加任何您想要的“按钮”,脚本会将它们全部考虑在内并进行相应调整。只要确保设置它们的“值”即可。 当我写这篇文章时,一些人给出了一些快速的答案。我还不能发表评论(声誉低),所以我会在这里留下我的评论。 一些建议的答案告诉您使用innerHTML来获取小费值。这是错误的,您正在使用表单字段,应该使用 element.value,这就是它的用途。 有些人甚至敢说使用 HTML5 data-* 属性。当然,你可以。但你为什么要这么做呢? HTML 和 DOM 已经提供了完成任务所需的所有工具,而无需使用不必要的属性来污染 HTML。 value="" 属性旨在在表单中使用,它应该在字段值的 data-* 属性上使用。 一般来说,innerHTML旨在获取 HTML,而不一定是文本或值。还有其他方法可以获取您正在寻找的值。对于表单元素,它是 element.value,对于大多数其他 HTML 元素,它是 element.textContent。 希望这些解释有帮助 function tip(o) { var input = document.querySelector("input[id='bill']"); var total = input.value * o.innerHTML; document.querySelector("#tip").innerHTML = "&#36;" + total; } Total Bill: <input id="bill" type="text"> <button type="button" onclick="tip(this)">15</button> <button type="button" onclick="tip(this)">18</button> <button type="button" onclick="tip(this)">20</button> <div id="tip">You owe...</div> 嘿我最近找到了解决这个问题的简单方法: 您可以将内部文本作为元素的 id 提供。在事件处理程序中,您可以通过以下方式访问内部文本: e.目标.id 希望这个解决方案可以帮助您:)


Symfony 的 NumberType 作为 HTML5 输入字段和自定义区域设置

我的应用程序更喜欢 de 作为区域设置来显示数字,如 1.234.567,89 而不是 1,234,567.89(或 1234567,89 而不是 1234567.89)。 所以我更改了 config.yml 中的本地参数: 参数...


Plyr 多个玩家悬停时播放并在鼠标移开时暂停

我正在关注这个溢出讨论(在悬停时播放多个 Plyr Vimeo 嵌入),该解决方案非常适合嵌入式视频(YouTube、Vimeo 等),不幸的是不适用于 HTML5 视频...


如何默认或通过 CSS 将详细信息元素设置为 OPEN

HTML5 添加了两个新元素,可用于标记文章的目录:详细信息和摘要。 详细信息元素默认为关闭(隐藏除摘要元素之外的所有内容...


如何解决错误“as.data.frame.default(data) 中的错误:无法强制类‘“lm”’到 data.frame”

abc4 <- lm(Sales~., data=abc4) summary(abc4) abc5 <- lm(Sales~ T+June+July+August+September+October+November+December, data=abc4) summary(abc5) I'm trying to run regression. If I run the fi...


背景不适用于视频隐藏式字幕::iOS Mobile 上的 Firefox 和 Safari 上的cue

我正在尝试通过 ::cue css 选择器在 HTML5 视频播放器上设置隐藏式字幕样式,如下所示。代码笔链接 ::提示{ 背景:rgba(255, 255, 255, 0.8); /*不适用于 iOS 移动版 Firefox、Safari...


调查表问题:调查表功能显示的观测值数量与数据中的实际观测值数量不同

数据<- data.frame(X =c(1,4,6,4,1,7,3,2,2),Y = c(6,5,9,9,43,65,45,67,90),weight=c(0.1,1.2,4,0,0,5,0.65,1,0)) dat_design <- svydesign(ids = ~1, data = Data, weights = Data$weight) ab=


如何使用adb命令将文件从计算机推送到/data/.../databases/?

以下命令是拉取文件: adb -d shell "run-as com.myapp cat /data/data/com.myapp/databases/file.db" > file.db 但是如何像 Android Studio 通过设备文件那样将其推回


为 Data Fusion 或 Cloud Composer 实例分配静态 IP

我正在尝试使用 Google Data Fusion 连接到 Microsoft SQL Server 数据库,并且需要有一个静态 IP。 我尝试在子网上配置静态 IP 并将其连接到 Data Fusion ...


获取世博会资产

访问世博会资产的正确方法是什么? 我试过这个: 等待 Asset.loadAsync(require('file:///assets/data/catalog.json')); 错误: 无法解析“file:///assets/data/catalog.json”...


将多个对象添加到另一个对象

我一直在开发本教程中制作的应用程序版本(https://learn.microsoft.com/pl-pl/aspnet/core/data/ef-rp/complex-data-model?view =aspnetcore-5.0&tabs=visual-studio)。我有


为什么没有从指针到引用的隐式转换到const指针[重复]

我将用代码来说明我的问题: #包括 void PrintInt(const unsigned char*& ptr) { 整数数据=0; ::memcpy(&data, ptr, sizeof(data)); // 推进 po...


调整 ggplot 条形图中的 x 轴标签

我想移动上方平均线下方的条形标签。 我正在使用这段代码来制作这个图表 水平 <- mean(data$SPAD) quux <- data %>% 选择(基因型,规格...


AOS 中的数据绑定 - 可能吗?

我在我的角度项目中使用滚动动画,我有一堆图像,我想一个接一个地显示它们。 我在我的角度项目中使用滚动动画,我有一堆图像,我想一个接一个地显示它们。 <div class="img-gallery"> <div *ngFor="let imgSrc of images" data-aos="zoom-in"> <img [src]="imgSrc"> </div> </div> 我想为每个包装 div 添加 data-aos-delay 指令,就像这样 <div *ngFor="let imgSrc of images; let i = idnex" data-aos="zoom-in" [data-aos-delay]="i * 100"> <img [src]="imgSrc"> </div> 但是,不出所料 - 它向我显示了错误 无法绑定到“data-aos-delay”,因为它不是“div”的已知属性 我怎样才能实现它?任何实施都将感激地接受 可以改成下面吗 <div *ngFor="let imgSrc of images; let i = idnex" data-aos="zoom-in" data-aos-delay="{{i * 100}}"> <img [src]="imgSrc"> </div>


运行 npx json-server --watch Data/db.json --port 8000 时,它会抛出一个新错误

每当我运行 npx json-server --watch Data/db.json --port 8000 时,它都会抛出错误 类型错误 [ERR_PARSE_ARGS_UNKNOWN_OPTION]:未知选项“--watch”。要指定位置参数星...


有没有办法在有条件的情况下隐藏v-data-table中的展开按钮?

借助 v-data-table 中的“show-expand”属性,展开按钮会显示在数据表的所有行中。 借助 v-data-table 中的“show-expand”属性,展开按钮会显示在数据表的所有行中。 <v-data-table :expanded.sync="expanded1" :headers="headers1" :items="items" show-expand class="elevation-1" > 有没有办法根据 Vuetify 3 中的条件进行渲染? 在 Vuetify 2 中,使用 item.data-table-expand 插槽来实现此目的。 <template #item.data-table-expand="{ item, expand, isExpanded }"> <td v-if="item?.versions?.length > 0" class="text-start"> <v-btn variant="text" density="comfortable" @click="expand(!isExpanded)" class="v-data-table__expand-icon" :class="{ 'v-data-table__expand-icon--active': isExpanded }" > <v-icon>mdi-chevron-down</v-icon> </v-btn> </td> </template> 但是,在 Vuetify 3 中使用相同的代码块会返回类型错误: Uncaught TypeError: expand is not a function expand 现在是 toggleExpand 并期望 internalItem 插槽道具 <template #item.data-table-expand="{ item, internalItem, toggleExpand, isExpanded }"> <td v-if="item?.versions?.length > 0" class="text-start"> <v-btn variant="text" density="comfortable" @click="toggleExpand(internalItem)" class="v-data-table__expand-icon" :class="{ 'v-data-table__expand-icon--active': isExpanded }" > <v-icon>mdi-chevron-down</v-icon> </v-btn> </td> </template>


带有 std::enable_if 的嵌套模板类,C++

我有一个模板类B,其第一个参数T1必须继承类A,第二个参数T2用于嵌套类C: A 类 { ... }; 模板 我有一个模板类B,其第一个参数T1必须继承类A,第二个参数T2用于嵌套类C: class A { ... }; template<typename T1, typename T2 = T1, typename = std::enable_if_t<std::is_base_of<A, T1>::value>> class B { class C { T2 data; C(T2 data); void func(); ... }; ... }; 问题是当我尝试定义嵌套类的构造函数和方法时出现错误: template<typename T1, typename T2, typename> B<T1, T2>::C::C(T2 data) : data(data) { ... } template<typename T1, typename T2, typename> void B<T1, T2>::C::func() { ... } E0464“B::value, void>>::C”不是类模板; C3860 类类型名称后面的类型参数列表必须按照类型参数列表中使用的顺序列出参数。 如果我不使用嵌套类或不使用 std::enable_if,代码可以正常工作,但在这里我需要它们,而且我真的不明白出了什么问题。 定义构造函数时仍然需要提供默认的模板参数: template<typename T1, typename T2, typename D> B<T1, T2, D>::C::C(T2 data) : data(data) { } 或者,由于最后一个参数仅用于 SFINAE 目的并且始终旨在为 void,因此您可以编写: template<typename T1, typename T2> B<T1, T2, void>::C::C(T2 data) : data(data) { } 请注意,最好在 C 中定义构造函数。 无论如何,大多数时候你都无法将模板拆分为标头/源代码,并且处理类模板的外线定义可能非常烦人且脆弱。 C++17 和 C++20 的注意事项 如果您使用的是 C++20,您可以编写: template<std::derived_from<A> T1, typename T2 = T1> class B { /* ... */ }; template<std::derived_from<A> T1, typename T2> B<T1, T2>::C::C(T2 data) : data(data) { } 如果您使用的是 C++17,您至少可以使用辅助变量模板std::is_base_of_v<A, T1>。


将 Spring Data Rest 与反应式存储库一起使用时,FluxUsingWhen 无法转换为 Iterable 错误

我配置了一个 ReactiveSortingRepository 来查看 Spring Data Rest 上的反应功能,过去我主要使用 PagingAndSortingRepository 将资源公开为 REST 端点,所以想要...


OpenEdge ABL JSON 到临时表:READ-JSON

我如何将其(如下)读取到临时表中: { “参数”:{ }, "data": "{\"姓名\":\"morpheus11\",\"工作\":\"leader1221\"}&qu...


如何将自定义用户类型作为参数传递给 Spring Data JPA 查询方法?

我有一个 Spring data JPA 存储库,它由 postgresql 数据库支持。作为查询的一部分,我想在查询中使用间隔。我设法通过创建一个 SQLFunction 来实现它...


在极坐标数据框中切片多个块

考虑以下数据框: df = pl.DataFrame(data={"col1": range(10)}) ┌──────┐ │ 第 1 列 │ │ --- │ │ i64 │ ╞══════╡ │ 0 │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ 5 │ │ 6 │ ...


从 html 中提取 <h2> 标题文本,其中标题文本可能包含 <code> 和 </code> 标签

我有一个 html 文件,其中包含一些 标签,例如 一个<- ' 我有一个 html 文件,其中包含一些 <h2> 标签,例如 a <- '<section id="sec-standard-stoet-geary" class="level2" data-number="9.4"> <h2 data-number="9.4" class="anchored" data-anchor-id="sec-standard-stoet-geary"> <span class="header-section-number">9.4</span> Standardising PISA results</h2>' b <- '</span> <span class="fu">read_parquet</span>(<span class="st">"&lt;folder&gt;PISA_2015_student_subset.parquet"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre> </div> </div> </section><section id="sec-leftjoin" class="level2" data-number="9.3"><h2 data-number="9.3" class="anchored" data-anchor-id="sec-leftjoin"> <span class="header-section-number">9.3</span> Linking data using <code>left_join</code> </h2> <p>' 我可以使用以下方法提取a的标题: str_extract_all(a, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > [1] "Standardising PISA results" 但是在 b 上尝试这个不会返回任何结果: str_extract_all(b, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > character(0) 编辑:从评论来看,这似乎是正则表达式无法解析换行符。 我尝试在正则表达式(?s)中启用单行模式进行解析,但它仍然不起作用 我会在这里使用 html 解析器而不是正则表达式: library(rvest) read_html(a) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.4 Standardising PISA results" read_html(b) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.3 Linking data using left_join"


如何利用v-data-table中的item-class来增加字体大小?

我对 VueJs 比较陌生,并尝试将我的 v-data-table 项目(Vuetify 2)中的字体大小更新为 20px。在这样做的过程中,我遇到了物品等级。这种方法对 chang 来说是成功的...


在 MUI Data Grid v6 中更新另一个单元格时,如何在编辑模式下更新一个单元格?

我正在使用 MUI Data Grid v6 组件并利用其内置的 CRUD 编辑功能。我有多个列,所有列都可以编辑。在我的“类别&...”列中选择新值后


RxJs 计时器仅调用一次,而不是每秒调用一次

下面是我的代码: this.callActiveListSubscription = 定时器(0,1000).pipe(switchMap(() => this.realtimeSupervisorHeatMapService.getLiveCallList())).subscribe((data: any) => { 控制台.log('


从 html 中提取 <h2> 标题文本,其中标题文本可能包含换行符

我有一个 html 文件,其中包含一些 标签,例如 一个<- ' 我有一个 html 文件,其中包含一些 <h2> 标签,例如 a <- '<section id="sec-standard-stoet-geary" class="level2" data-number="9.4"> <h2 data-number="9.4" class="anchored" data-anchor-id="sec-standard-stoet-geary"> <span class="header-section-number">9.4</span> Standardising PISA results</h2>' b <- '</span> <span class="fu">read_parquet</span>(<span class="st">"&lt;folder&gt;PISA_2015_student_subset.parquet"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre> </div> </div> </section><section id="sec-leftjoin" class="level2" data-number="9.3"><h2 data-number="9.3" class="anchored" data-anchor-id="sec-leftjoin"> <span class="header-section-number">9.3</span> Linking data using <code>left_join</code> </h2> <p>' 我可以使用以下方法提取a的标题: str_extract_all(a, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > [1] "Standardising PISA results" 但是在 b 上尝试这个不会返回任何结果: str_extract_all(b, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > character(0) 编辑:从评论来看,这似乎是正则表达式无法解析换行符。 我尝试在正则表达式(?s)中启用单行模式进行解析,但它仍然不起作用 我会在这里使用 html 解析器而不是正则表达式: library(rvest) read_html(a) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.4 Standardising PISA results" read_html(b) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.3 Linking data using left_join" 这是一个辅助函数,它将选择具有跨度的 H2 元素,但会忽略跨度 library(xml2) geth2 <- function(x) { temp <- read_html(x) %>% xml_find_all("//h2[span]") xml_remove(xml_find_all(temp, ".//span")) temp %>% xml_text() %>% stringr::str_squish() } geth2(a) # [1] "Standardising PISA results" geth2(b) # [1] "Linking data using left_join"


检查play.api.libs.json.Json中是否存在密钥

包含类似 play.api.libs.json.Json 的功能 val data=Map("id" -> "240190", "密码" -> "密码","电子邮件" -> "[email protected]") data.contains("email")//true val信息=Json...


我无法用vue.js显示json

我需要使用 v-for 显示 json 中的产品数组,但我无法这样做。 我正在尝试显示产品数组中的 json 数据,但它不起作用。 Vue.js 我需要使用 v-for 显示 json 中的产品数组,但我无法这样做。 我正在尝试显示产品数组中的 json 数据,但它不起作用。 Vue.js <div class="box" v-for="product in products" :key="product.id"> <h2>Produto {{ product.name }}</h2> <h3>Situação {{ product.situation }}</h3> </div> export default { data() { return { products: [], }; }, methods: { async getData() { try { const req = await fetch("http://localhost:3000/products"); const data = await req.json(); this.products = data.products; console.log("data" + data); } catch (error) { console.error("Error fetching data:", error); } }, mounted() { this.getData(); }, }, }; JSON: { "products": [ { "id": "a898", "name": "Claudio Romano", "situation": "Ativo" } ] } 您问错了问题,因为该问题与 JSON 无关。如果您对此进行调试,您会注意到 console.logs 不执行,这意味着问题更为根本,因为该方法本身并未实际运行。 根本问题是mounted()不应该在methods内部。您正在使用 Vue 的选项 API,其中 data()、methods 和 mounted 都是独立的、单独的“选项”。您需要将安装移动到方法之外,它应该是一个“兄弟”选项。 export default { data() { ... }, methods: { ... }, mounted() { this.getData(); }, }; 游乐场演示


AOS - 如何在向上滚动时不再隐藏元素

我在我的角度项目中使用aos库,并将其附加到元素上 我在我的 Angular 项目中使用 aos 库,并将其附加到元素 <div data-aos="zoom-in"></div 它工作正常,但我的问题是,当我向上滚动时 - 元素消失,向下滚动 - 再次出现。 我认为这是 AOS 的默认行为,所以我的问题是 - 我该如何更改它?因此,当滚动到元素出现后的任意位置时,它会静态地停留在那里并且不会消失。 感谢您的每一个回答。 您可以使用如下属性data-aos-once="true"来避免元素在向上滚动时消失。 <div data-aos="zoom-in" data-aos-once="true"></div> 注意:使用data-aos-once="true"时,AOS效果只会起作用一次。


PySpark 分区镶木地板需要很长时间才能加载,即使使用指定的模式

设置:我有一个包含约 1300 个分区 parquet 文件的文件夹(例如 C:\Project Data\Data-*.parquet),其中 * 是一个计数器,每个文件大小约为 8MB。所有文件都具有相同的架构。 我是茹...


CSS 在窄屏幕上显示每个单元格一行的表格

我的 HTML 看起来有点像这样 我的 HTML 看起来有点像这样 <html><body><table> <thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead> <tbody> <tr><td>1A</td><td>1B</td><td>1C</td><td>1D</td><td>1E</td></tr> <tr><td>2A</td><td>2B</td><td>2C</td><td>2D</td><td>2E</td></tr> <tr><td>3A</td><td>3B</td><td>3C</td><td>3D</td><td>3E</td></tr> </tbody> </table></body></html> 每一行代表一个对象,列是它的属性。实际上,单元格值相当长——有时甚至有 20-30 个字符长。它在大多数设备上渲染良好,但在较小的手机上可能会出现问题。我知道我可以在狭窄的设备上抑制某些列,但在这个特定的情况下感觉不太好。目前我的桌子上有 x-overflow: scroll,但我更希望有一些 CSS 可以使表格在窄设备上呈现得更像这样: A: 1A B: 1B C: 1C D: 1D E: 1E ----- A: 2A B: 2B C: 2C D: 2D E: 2E ----- (etc) 我了解如何测试设备宽度,因此出于这个问题的目的,我们假设我想无条件地执行此操作。稍微更改一下 HTML 标记就可以了,例如添加额外的类或属性,尽管我想使用 <table> 元素来保留它,每个逻辑行有一个 <tr>。这是为了向后兼容,因为我知道有相当多的用户会抓取该网站(尽管存在更简洁的 API)。由于内部政治,如果可能的话,我宁愿避免需要 Javascript 的解决方案(并且无论如何,如果需要,我知道如何编写 JS 解决方案)。 我可以做到这一点,但我不知道如何从这里硬编码为“X”的字段名称开始: thead { display: none; } table, tr, td { display: block; } tr + tr { border-top: thin solid black; } td::before { content: "X:"; display: inline-block; width: 2em; } 我见过很多网站都在做这种事情,但目前我正在努力寻找一个在 CSS 中做这件事的网站。看起来这应该是一个常见问题,但我很难知道要搜索哪些术语,因此可能会在这里或其他地方错过一些很好的解释。 你就快到了。可能会使用例如data-col 元素上的 <td> 属性并在 CSS 中引用它们 content 上的 :before thead { display: none; } table, tr, td { display: block; } tr+tr { border-top: thin solid black; } td::before { content: attr(data-col)':'; display: inline-block; width: 2em; } <table> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> </thead> <tbody> <tr> <td data-col="A">1A</td> <td data-col="B">1B</td> <td data-col="C">1C</td> <td data-col="D">1D</td> <td data-col="E">1E</td> </tr> <tr> <td data-col="A">2A</td> <td data-col="B">2B</td> <td data-col="C">2C</td> <td data-col="D">2D</td> <td data-col="E">2E</td> </tr> <tr> <td data-col="A">3A</td> <td data-col="B">3B</td> <td data-col="C">3C</td> <td data-col="D">3D</td> <td data-col="E">3E</td> </tr> </tbody> </table> ABCD


如何调用不在类本身中的成员函数指针?

结构CALLBACK_DATA { 对象*指针; void (对象::*回调)(); }; int main() { CALLBACK_DATA 数据 = getData(); //这不起作用。 (data.pointer)->(data.*callback)();...


c# Azure.AI.OpenAI 在启动时出现错误

我正在尝试遵循 Microsoft 的操作方法(以 C# 方式): https://learn.microsoft.com/en-us/azure/ai-services/openai/use-your-data-quickstart?tabs=command-line%2Cpython&pivots=programming-lan...


AVX2 缩小转换,从 uint16_t 到 uint8_t

我想使用 AVX2 将 2d 数组从 16 位缩小到 8 位。有效的C++代码如下: auto * s = reinterpret_cast(i_frame.Y); 自动 * d = 缩小.data(); 对于(


Windows 窗体应用程序上的音乐位置问题

此代码正在运行: 音乐声音= new Music(); sound.Play(@"C:\Users\itama\Documents\Startech\HelperApplication\HelperApplication\data\music larmSound.mp3"); 我有一个问题,如何...


如何使用javascript forloop在点击时获取html中data-id的值并返回值

这是我的html {% if t_ques %} 今天 {% 表示 t_... 中的项目 这是我的html <ul class="conversations"> {% if t_ques %} <li class="grouping">Today</li> {% for item in t_ques %} <li class="active"> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if y_ques %} <li class="grouping">Yesterday</li> {% for item in y_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if s_ques %} <li class="grouping">Previous 7 days</li> {% for item in s_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if more_s_ques %} <li class="grouping">Previous 30 days</li> {% for item in more_s_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} </ul> </div> 我一直在尝试使用 JavaScript 单击时获取任何 data-pk 的值,但似乎无法实现。这一直说 currentTarget 未定义,当我用 target 替换它时,它说同样的事情。然后,如果我将其替换为 document.querySelector("#convers"),它只会给出第一个值,无论单击哪个 这是我的 JavaScript const conversationButtons = document.querySelectorAll("#convers"); conversationButtons.forEach(button => { button.addEventListener("click", getId); }); function getId(e){ var idValue = e.currentTarget.getAttribute('data-pk'); console.log(idValue); //output corresponding target-id if(!chat_id){ url = `/chat-previous/${idValue}/` }else{ url = 'initiate-chat/' } return url; } $.ajax({ type: 'POST', url: getId(), data: { message: usermsg, chatId: chat_id, // itemId: item_id, csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(), action: 'post' }, success: function(json){ const res = json['chats'] setTimeout(() => { hideTyping(); body.appendChild(mgses(res, "assistant")); scrollToBottomOfResults(); }, 1000); console.log(json) }, error: function(rs, e){ setTimeout(() => { hideTyping(); body.appendChild(setBotResponse("bot")); scrollToBottomOfResults(); }, 600); console.log(rs.error); }, }); 我使用了其他方法,例如 const getId = () => { console.log(document.querySelector(".conversation-button").getAttribute('data-pk')) if(!chat_id){ url = `/chat-previous/${document.querySelector(".conversation-button").getAttribute('data-pk')}/` }else{ url = 'initiate-chat/' } return url; } conversationButtons.forEach(button => { button.addEventListener("click", getId); console.log(button.getAttribute('data-pk')); }); 仍然无法得到我真正想要的。有什么方法可以实现这个目标吗? 委托并使用按钮的类 document.querySelector('.conversations').addEventListener('click', (e) => { let tgt = e.target.closest('.conversation-button'); if (!tgt) return; const idValue = tgt.dataset.pk; console.log(idValue); //output corresponding target-id return chat_id ? 'initiate-chat/' : `/chat-previous/${idValue}/` }) 您做出了多个错误的假设,第一个是您不能有多个具有相同 id 的元素,这将导致您描述的确切行为“它需要第一次出现的 id” 第二件事是你可能想在点击时发出ajax请求,但你构建代码的方式并不能做到这一点。 要解决这些问题,请生成如下 html button.conversation-button button.conversation-button button.conversation-button 然后向所有具有 .conversation-button 类的元素添加一个事件侦听器,并将您的 ajax 调用包装到一个函数中,主要是您已经拥有的函数。 const conversationButtons = document.querySelectorAll(".conversation-button"); conversationButtons.forEach(button => { button.addEventListener("click", doStuff); }); ... function doStuff(e) { $.ajax( ... url: getId(e) ... } function getId(e) { let idValue = e.currentTarget.getAttribute('data-pk'); let url = ...; ... return url; // } 只是一些伪代码让你得到一个想法,祝你好运:)


使用 `ggsurvfit::ggsurvfit()` 绘制对数减对数图

是否可以使用 ggsurvfit::ggsurvfit() 生成对数减对数图? 这是我想要生成的示例: 库(ggsurvfit) 温度 <- survfit2(Surv(time, status) ~ adhere, data =


使用torchvision下载的数据集在哪里?

我今天刚接触 Colab。 当我使用 torchvision 下载数据集时 trainset = torchvision.datasets.CIFAR10(root='./data', train=True, download=True) 我的理解是我正在下载...


如何在React Native中显示图像的顶部,

这是我现在的情况,我的形象是这样的 这是我当前的代码 这是我现在的情况,我的形象是这样的 这是我当前的代码 <View> <Image style={{width: '100%', height: 285}} source={{ uri: `${posterPath + data?.poster_path}`, }} resizeMode="cover" /> <Text>{data?.title}</Text> </View> 我希望我的图像看起来像这样 (这只是一个例子) 我知道在普通的CSS中我们是否可以使用object-position,但不幸的是React Native并不直接支持object-positionCSS属性,所以我很困惑如何实现这个 您需要使用 Flex:1,它使用整个屏幕,然后相应地定位和调整图像大小。 <View style={{flex:1}}> <Image style={{width:'100%', height:285}} source={{ uri: `${posterPath + data?.poster_path}`, }} resizeMode="cover" /> <Text>{data?.title}</Text> </View>


在 Jinja 中选择 for 循环内的元素

我正在尝试并排渲染两个不同的表,它们在 Flask 中作为数据帧一起传递 return render_template('rankings.html',tables=[df1.to_html(index=False,classes='data...


创建分区时,Athena Iceberg 目前不支持查询类型

我在 Athena 中运行以下 sql 来创建分区 ALTER TABLE 数据库.表 ADD 分区(分区一='123',分区二='456') 位置 's3:///data/


pandas 重新索引多重索引无法正常工作

我有一个 pandas(版本 1.0.5)DataFrame,具有两个级别的 MultiIndex,例如喜欢: mi = pd.MultiIndex.from_product((('a', 'c'), (5, 12))) np.随机.种子(123) df = pd.DataFrame(data=np.random.ran...


使用一些模板化方法理解reinterpret_cast错误

我正在尝试使用一些 C++ ARM 编译器来编译以下代码。 voidpairs_converter(const mem_t& mem, uint16_t* data) {/* 一些东西 */} 模板 排队 无效


© www.soinside.com 2019 - 2024. All rights reserved.