使用JS的DOM文档对象模型获取前端循环的参数
作者:追·不逝 发布时间:2024-04-10 13:54:46
使用JS的DOM(文档对象模型)获取前端循环的参数
使用Go语言渲染html,但是想让网页动起来,显示一些弹窗还是比较麻烦的,于是乎,想到使用js获取页面的数据进行显示,但是js无法加载go的一些变量。想了很久,突然在网页调试的时候使用了js的DOM进行元素查找获得了些许灵感最后实现了这个功能。
1.网页显示部分
该部分是显示go后端传递的一个结构体数组里的各项数据,展示到一个表格中,故使用了循环展示数据,详见代码:
{{ range $v := .res}}
<tr >
<td name="assetid">{{ $v.AssetUUID}}</td>
<td>{{ $v.AssetName}}</td>
<td>{{ $v.AssetPrice}}</td>
<td>{{$v.ProofUUID}}</td>
<td>{{ $v.DataType}}</td>
<td>{{ $v.DeviceType}}</td>
<td>{{ $v.StorageTime}}</td>
<td>
<a class="link-update" href="javascript:del($r)">撤销</a>
<a class="link-update" href="#.html/?AssetID={{$v.AssetUUID}}">更新</a>
</td>
</tr>
{{ end }}
在代码中的
{{ range $v := .res}}<br>.....<br>{{end}}
这个部分.res是Go后端向网页传递的数据,range $v即是对其进行遍历的操作。
撤销操作使用get方法传递参数,但是再确定是否执行撤销操作的时候,我想进行确认,因此需要获得{{ $v.AssetUUID}}的数据,传进js里面,进行弹框的确定及URL的跳转。
我尝试,将{{ $v.AssetUUID}}当成变量直接传进js里是执行不了的,这一步进行不下去了。
2.使用js的DOM获取页面的数据
2.1预备知识
1)DOM查找元素
document获取节点的基本方法
document.getElementById('id'); //通过id来获取元素,返回指定的唯一元素。
document.getElementsByName("name"); //通过name来获取元素,返回name='name'的集合。
.document.getElementsByClassName("classname") //用classname来获取元素,返回的是一个的集合(不兼容IE8及以下)。
document.getElementsByTagName('div'); //用元素的标签获取元素,返回所有标签=“div”的集合。
2) 查找
直接查找
var obj = document.getElementById('id');
间接查找
文件内容操作
innerText 仅文本
innerHTML 全内容
value
input value 获取当前的值
select 获取选中的value的值 document.getElementById('s1').selectedIndex=1
Textarea 获取value的值
2.2 从网页获取数据
document.getElementsByName("assetid")获得的是一个NodeList的列表
如何获得具体的assetid呢?
可以使用document.getElementsByName("assetid")[]这种方式定位到需要获得id的位置,比如获得第一个assetid位置是:document.getElementsByName("assetid")[0]
且document.getElementsByName("assetid")[0].textContent是这个数据里面的text值,具体请看:
即可获取这个id的具体值。
代码具体实现:
<script>
$r=-1;
</script>
{{ range $v := .res}}
<script>
$r++;
</script>
<tr >
<td name="assetid">{{ $v.AssetUUID}}</td>
<td>{{ $v.AssetName}}</td>
<td>{{ $v.AssetPrice}}</td>
<td>{{$v.ProofUUID}}</td>
<td>{{ $v.DataType}}</td>
<td>{{ $v.DeviceType}}</td>
<td>{{ $v.StorageTime}}</td>
<td>
<a class="link-update" href="javascript:del($r)">撤销</a>
<a class="link-update" href="#.html/?AssetID={{$v.AssetUUID}}">更新</a>
</td>
</tr>
{{ end }}
<script>
function del(pos){
if(false==confirm("是否确定删除当前记录")) return;
var $aid=document.getElementsByName("assetid")[pos].textContent;
location.href='Myasset.html/?action=del&AssetID='+$aid;
}
</script>
说明$r表示的是下标。
来源:https://www.cnblogs.com/echoqiqi/archive/2023/02/11/17112628.html
猜你喜欢
- 源码: 代码如下: <% '隐藏并修改文件的最后修改时间的aspshell '原理:通过FSO可以修改文件的属性,比
- Default.aspx<%@ Page Language="C#" AutoEventWireup="
- 问题你想使用一个简单的REST接口通过网络远程控制或访问你的应用程序,但是你又不想自己去安装一个完整的web框架。解决方案构建一个REST风
- 本文实例讲述了Django利用cookie保存用户登录信息的方法。分享给大家供大家参考,具体如下:设置cookieresponse对象.se
- 先上代码举例说明:import argparse parser = argparse.ArgumentParser()
- 1. 场景大家好,我是J哥。前段时间有人私信我,说自己辛辛苦苦剪辑的短视频,上传到某平台后,由于播放量太大,收到 降权 的通知,直接导致这个
- 本文实例讲述了Python简单遍历字典及删除元素的方法。分享给大家供大家参考,具体如下:这种方式是一定有问题的:d = {'a
- 在网页中,我们经常需要引用大量的javascript和css文件,在加上许多javascript库都包含debug版和经过压缩的releas
- String slctpsql="select id ,"+uid+","+ddd+",&
- 如果你的数据量有几十万条,用户又搜索一些很通俗的词,然后要依次读最后几页重温旧梦。mysql该很悲壮的不停操作硬盘。 所以,可以试着让mys
- 摘要:MySQL JDBC抽取到底应该采用什么样的方式,且听小编给你娓娓道来。小编最近在云上的一个迁移项目中被MySQL抽取模式折磨的很惨。
- 这篇文章介绍如何利用Selenium的方法进行截图,在测试过程中,是有必要截图,特别是遇到错误的时候进行截图。在selenium for P
- 本文实例讲述了python函数enumerate,operator和Counter使用技巧。分享给大家供大家参考,具体如下:最近看人家的代码
- 前言写过的这些脚本有一个共性,都是和web相关的,总要用到获取链接的一些方法,累积不少爬虫抓站的经验,在此总结一下,那么以后做东西也就不用重
- SQL Server 阻止了对组件 'Ad Hoc Distributed&nbs
- 目录合理的创建索引设置数据库持久连接减少SQL的执行次数仅获取需要的字段数据使用批量创建、更新和删除,不随意对结果排序参考网址:Django
- Python列表具有内置的 list.sort()方法,可以在原地修改列表。 还有一个 sorted()内置的函数从迭代构建一个新的排序列表
- 本文实例讲述了C#简单查询SQLite数据库是否存在数据的方法。分享给大家供大家参考,具体如下://sqlite数据库驱动组件using S
- 从一个问题说起五年前在腾讯的时候,发现分页场景下,mysql请求速度非常慢。数据量只有10w的情况下,select xx from 单机大概
- 使用工具:pexpect库pexpect可以理解为Linux下expect(不知道的可以百度下linux expect)的python封装。