如何在div面板中滚动到JSON中的行号？
在div面板中滚动到JSON中的行号，可以通过以下步骤实现：
- 首先，确保你已经将JSON数据加载到div面板中，并且已经解析成了JavaScript对象。
- 获取要滚动到的行号，可以通过用户输入、程序计算或其他方式获得。
- 使用JavaScript的DOM操作，找到对应行号的JSON行元素。
- 使用JavaScript的scrollIntoView()方法，将该行元素滚动到可见区域。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.json-panel {
height: 300px;
overflow: auto;
}
</style>
</head>
<body>
<div class="json-panel" id="jsonPanel"></div>
<script>
// 假设已经将JSON数据加载到jsonPanel中
var jsonData = {
"name": "John",
"age": 30,
"city": "New York"
};
// 解析JSON数据并显示在div面板中
var jsonPanel = document.getElementById("jsonPanel");
jsonPanel.innerText = JSON.stringify(jsonData, null, 2);
// 滚动到指定行号的JSON行
function scrollToLine(lineNumber) {
var lines = jsonPanel.innerText.split("\n");
var lineElement = jsonPanel.querySelector("span[data-line='" + lineNumber + "']");
if (lineElement) {
lineElement.scrollIntoView();
}
}
// 示例：滚动到第3行
scrollToLine(3);
</script>
</body>
</html>在上述示例中，我们首先定义了一个div面板，设置其高度和溢出属性，使其可以滚动显示内容。然后，我们将JSON数据解析并显示在div面板中。接下来，定义了一个scrollToLine()函数，该函数接受一个行号参数，通过查询对应行号的JSON行元素，并使用scrollIntoView()方法将其滚动到可见区域。最后，我们调用scrollToLine()函数，示例滚动到第3行。
请注意，这只是一个简单的示例，实际应用中可能需要根据具体情况进行适当的调整和扩展。
相关·内容
1回答
如何在div面板中滚动到JSON中的行号？
javascript、html、angularjs、twitter-bootstrap-3
我有以下代码片段作为JSON应用程序的一部分，用于在选项卡式面板中显示AngularJS。<div class="col-md-10"> <tabset>
浏览 2提问于2017-01-30得票数 0
回答已采纳
1回答
如何从扩展中获取Chrome DevTools源代码编辑器中的光标位置？
javascript、google-chrome、google-chrome-extension、google-chrome-devtools
我为Google开发了扩展，允许使用上下文菜单在外部编辑器中打开源代码文件。当UI中的文件位置包含行号(如jquery.js:2191)时，它在大多数情况下(网络面板、性能面板、样式检查器等)都能很好地工作。
唯一的例外是源面板。回调函数不接收行号。DevTools是否有一些API来从setOpenResourceHandler()回调中获取源编辑器中的游标位置？
浏览 3提问于2017-07-17得票数 27
回答已采纳
1回答
如何实现组件间的拖放
angular、angular-material、drag-and-drop、drag、angular-cdk
我想为div实现拖动功能。div位于覆盖面板中(如警告消息)，我需要将它们拖动到屏幕的其余部分。(例如，我需要拖动一个警告消息div。)
浏览 15提问于2019-06-04得票数 0
2回答
如何使用jQuery循环水平画廊？
javascript、jquery、html、css
我在一个水平画廊上工作，它将展示混音带封面，我有五个div，id为panel_1，panel_2等。发生的情况是，当我到达面板5并继续滚动时，它不会像我希望的那样循环回到面板1。您可以在这里查看我到目前为止拥有的内容：谢谢你的帮忙!<div
浏览 1提问于2011-05-30得票数 3
回答已采纳
1回答
从顶部到底部
gnome、unity-dash、panel、dock
显然，这可以由MMOD小组来完成，但是安装总是会导致Ubuntu21中的错误。我知道Dash to panel，但我喜欢把它们分开。在Dash到面板上的时钟和日期与网站上的一切都是不好的。似乎是一件简单而有益的事情。
浏览 0提问于2021-11-30得票数 1
1回答
Java如何在文本组件的右侧显示行号
java、jtextarea、line-numbers、rights
我想在文本组件中显示行号。我找到了这个链接，它起作用了。但是我想在文本区域的右边显示行号。我该怎么做呢。谢谢！
浏览 2提问于2015-03-14得票数 0
回答已采纳
1回答
关闭事件上的ASP.NET Ajax PopupControlExtender？
asp.net、ajax、popupcontrolextender
我有一个带有关联popupcontrolextender.This的文本框，打开一个包含复选框列表的面板。
我要做的是，当用户单击出面板时，将复选框列表中选择的值添加到文本框中。我开始使用复选框列表的OnselectedIndexChanged，并在选中/未选中每个复选框后更新文本框。但是复选框列表很长，当您单击底部附近的一个复选框时，因为所有内容都在更新面板中，复选框列表在自动回
浏览 1提问于2010-12-14得票数 1
1回答
在ajax请求代码不允许我向上滚动之后，滚动到div的底部
javascript、php、jquery、css、ajax
我正在尝试使用javascript代码在ajax请求$("#chatmessages").scrollTop($("#chatmessages")[0].scrollHeight);之后滚动到div的底部，但是每当我有这样的代码时，它都不让我回滚，因为我让我的javascript每秒检查一个php文件，检查mysql数据库中是否有新的记录。"slow"); } , 10);
和我的</
浏览 1提问于2014-04-21得票数 0
2回答
获取Scintilla.NET组件中的可见行
c#、api、scintilla
如何在C#中获得闪烁组件的第一个可见行号(顶部)和最后一个可见行号？例如，如果我滚动文本，我能够看到第5-41行(没有折叠，这是当前组件显示的行数；其余的，您必须滚动到它们)，我如何通过编程获得这些数字？
浏览 9提问于2013-11-06得票数 0
回答已采纳
1回答
对白中不正确的表格行号宣布
android、html、wai-aria、talkback
我已经创建了一个包含多行的简单表，而且在表中，我定义了选项卡面板，其中有更多的行。 <div role="rowgroup"> <span role="columnheader" aria-sort>
</div&
浏览 5提问于2022-04-04得票数 0
3回答
在asp.net+jquery中将图像从一个面板拖放到另一个面板
jquery、html、css、asp.net、c#-4.0
考虑一个场景，我有两个面板-> Div-2我有多个像6-8这样的asp.net面板。我需要将图像从Div-1拖放到Div-2中，具有以下功能。
我需要将单个图像从Div-1拖动到Div-2中的面板。在将图像放入面板后，如果需要，
浏览 0提问于2014-09-22得票数 0
1回答
JToolTip on JPanel mouseMove操作
java、swing、jpanel、jtooltip
这个想法是，用户移动到JPanel (mouseMove)上，光标后面将是工具提示。但我不知道如何将工具提示设置为JPanel。我的意思是，我创建了JToolTip的实例，通过光标创建setLocation (在mouseMove中)，然后我不知道如何在面板上设置这个新的工具提示(如JPanel.setToolTip(newJToolTip
浏览 4提问于2013-01-15得票数 2
回答已采纳
3回答
如何在VBA编程中获取错误详细信息？
excel、vba、document
如何在VBA中获取错误详细信息，如行号、错误消息等。它显示诸如“编译错误”之类的简单消息，但不显示错误的详细信息和行号。
浏览 3提问于2020-03-02得票数 0
1回答
HTML表单中文件中的行号与textarea字段中的行号之间的对应关系
javascript、python、html、forms、textarea
我有一个由文本区域组成的表单，行号感谢Javascript。我使用这个表单验证JSON，就像jsonlint.org所做的那样。用户输入一些JSON，按validate，然后返回答案。我不是自己解析文件，而是使用python命令：如您所见，此命令接受一个文件。(char z)"
Python程序给出的行号对应于文件中的
浏览 3提问于2012-06-14得票数 1
回答已采纳
1回答
在使用ngx-markdown中的管道指令时，如何显示行号
angular、markdown、line-numbers
这是我当前的代码： <div [innerHTML]="jsonMarkdown | json | language : 'json' | markdown"></div> 它显示正确且格式化的jsonMarkdown，但是我无法使行号正常工作。我遵循文档，在angular.json中添加了行号插件，但是现在我被卡住了。我试过了 <<em
浏览 21提问于2019-02-25得票数 0
回答已采纳
2回答
崇高文本2，禁用生成输出面板/控制台自动滚动
console、terminal、sublimetext2、output、sublimetext
显然，每次脚本返回一个新行-- ST2上的构建面板/控制台--滚动到底部，这很好，因此我们总是可以看到最新的输出信息，但是当有大量具有悠久历史的信息时，很自然，在进程完成之前，您可能想要回滚并调试之前的信息打印因为当一个新行插入到控制台时，ST2总是滚动到底部，所以这是不可能的。我的问题是，是否有任何方法可以禁用生成输出面板上的新行的“自动滚动”，或者是
浏览 3提问于2013-07-30得票数 2
回答已采纳
1回答
Dreamweaver DOM getCurrentLine()
api、dom、dreamweaver
我目前正在尝试创建一个小的面板扩展，在Sublime Text 2代码编辑器上重新创建'minimap‘功能，但适用于Dreamweaver。我已经成功地创建了视图，但我想单击小地图中的任意位置，当前页面将向下滚动到所单击的当前行。不幸的是，我只能找到Dreamweaver DOM的'getCurrentLines()‘代码函数，它返回字符偏移量，而不是行号。有人知道如何从文档中返回当前行号吗？我可以通过在使用th
浏览 0提问于2011-10-31得票数 0
回答已采纳
2回答
嵌套<div>的Jquery滚动函数
javascript、jquery、html、css
我正在尝试制作一个nav，它可以滚动到我的站点的相应<div>。相应的divs嵌套在另一个带有max-height和滚动条的div中。这就是我的jquery往往会让我失败的时候。他是我提到的另一个问题的替罪羊：
请注意，当您单击该按钮时，它不会滚动到正确的div，再次单击时，它会滚动到一个不方便<e
浏览 0提问于2014-11-23得票数 1
1回答
我能否将Server 2017 CU25降级为CU20？
sql-server、sql-server-2017、memory-optimized-tables、downgrade、cumulative-update
Server 2017的新实例。在初始安装期间，我选择安装到CU25。数据库已经使用了几个月，但是当使用内存优化表时，它似乎出现了内存泄漏，有时会导致它在一夜之间崩溃。我有另一个实例，它在CU20上具有相同的作业和硬件，而且它从来没有遇到过这个问题。让我相信这是一个CU25问题。
我想降级到CU20，看看这是否解决了这个问题。做这件事最好的方法是什么？
浏览 0提问于2021-09-11得票数 1
回答已采纳
2回答
如何确保在使用.html()创建accordion之前已加载accordion
jquery、jquery-ui、jquery-ui-accordion
我遇到了一个问题，在accordion初始化之前，首先使用.html()将accordion html注入到标记上，从而使注入的html看起来像一个普通的html。这是我在脚本中的代码： heightStyle: "content",provider_id=1&limit=99&offset=1')
.done(function( <em
浏览 0提问于2013-06-24得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
