开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Onclick动态添加setAttribute到td元素，将变量作为字符串传递

。

在前端开发中，我们经常需要通过JavaScript来操作DOM元素，实现动态的交互效果。其中，setAttribute()方法可以用于为HTML元素设置属性和属性值。

针对这个问题，我们可以通过以下步骤来实现：

首先，我们需要获取到需要添加属性的td元素。可以通过getElementById()、getElementsByClassName()、querySelector()等方法来获取到对应的元素。
接下来，我们需要创建一个变量，用于存储需要传递的字符串。
使用setAttribute()方法，将变量作为字符串传递给td元素的属性。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>动态添加属性示例</title>
</head>
<body>
  <table>
    <tr>
      <td id="myTd">这是一个示例</td>
    </tr>
  </table>

  <script>
    // 获取td元素
    var tdElement = document.getElementById("myTd");

    // 创建变量并赋值
    var attributeName = "data-example";
    var attributeValue = "这是一个示例属性值";

    // 使用setAttribute()方法添加属性
    tdElement.setAttribute(attributeName, attributeValue);
  </script>
</body>
</html>

在这个示例中，我们通过getElementById()方法获取到id为"myTd"的td元素，并创建了一个变量attributeName来存储属性名，创建了一个变量attributeValue来存储属性值。然后，使用setAttribute()方法将属性名和属性值添加到td元素中。

这样，我们就实现了动态添加属性到td元素，并将变量作为字符串传递的功能。

推荐的腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

关于后端代码的总结_辐射4最强防具代码

可以通过将变量的值设置为 null 来清空变量。...该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。...动态添加一个元素-- appendChild <button type="button" onclick...text); //获取一个页面已经存在的元素 var div=document.getElementById("div1"); //添加新创建的元素p到已经存在的元素div中 div.appendChild...添加新创建的元素p到已经存在的元素div中,指定插入到段落P1前面 div.insertBefore(newElementP,p1); } 替换 HTML 元素 -replaceChild

3.2K2 0

SpringBoot--Thymeleaf

标准变量表达式就是Thpmeleaf完成数据的展示和处理的方式，必须在标签中使用，使用th命名空间，语法为：新建test.html: 1. th...，将员工显示到页面上 controller层代码和之前一样： @RequestMapping("showEmpList") public ModelAndView showEmpList...value1:value2 5.5 动态修改style属性结合上面的运算符，动态修改style属性： <td th:text="${emp.sal}" th:style="${emp.sal} ne...绑定点击事件，语法：th:onclick="function( [[param1]], [[param2]], ..)"...,'a') 判断字符串是否以a子串为结束，为结束返回true，反之false #string.length(msg) 返回字符串大小 #string.indexOf(msg,'a') 查找字符串中包含a

6183 0

JavaScript之Dom、事件，案例

将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。 3.2、Element元素的获取操作具体方法代码实现 <!...5.2、添加功能的分析为添加按钮绑定单击事件。创建 tr 元素。创建 4 个 td 元素。将 td 添加到 tr 中。获取文本框输入的信息。创建 3 个文本元素。...将文本元素添加到对应的 td 中。创建 a 元素。将 a 元素添加到对应的 td 中。将 tr 添加到 table 中。 5.3、添加功能的实现 <!...("td"); //4.将td添加到tr中 tr.appendChild(nameTd); tr.appendChild(ageTd);...a.setAttribute("onclick","drop(this)"); a.appendChild(aText); //9.将超链接元素添加到td中

1.2K2 0

JavaScript详细解析

5.2、添加功能的分析为添加按钮绑定单击事件。创建 tr 元素。创建 4 个 td 元素。将 td 添加到 tr 中。获取文本框输入的信息。创建 3 个文本元素。...将文本元素添加到对应的 td 中。创建 a 元素。将 a 元素添加到对应的 td 中。将 tr 添加到 table 中。 5.3、添加功能的实现 "); //2. pop() 删除数组末尾的元素 arr.pop(); document.write

1.5K1 0

html+css+JavaScript例题

-- 作为进行添加操作的窗口，不打开时是隐藏的 --> <!...html标签 var rowNum = 0; //此变量作为循环的跳出条件之一 //循环添加学生数据 /*使用当前页数计算出前一页数据所占的行数，... 并以此作为变量的初始值，让变量在这个节点上进行增长，所以进入某页或者在某页添 ...>" ].join("");//将字符串数组合成一个字符串 //alert(htmlStr); htmlStr += trStr; //将合成后的字符串存储到该变量中... } //把组合成的标签插入到tableBody里，也就是将数据显示到表格上 $("tableBody").innerHTML = htmlStr; //显示总行数

1.7K1 0

DOM

方法说明 appendChild(newDom) 向childNode列表的末尾添加一个节点 inserBefore(newDom, 参照节点) 新插入的节点作为参照节点的同胞节点，同时返回该插入节点...示例：将blog作为content的第一个子元素，将company作为content的最后一个子元素李刚 http://blog.csdn.net/ligang2585116 ptmind...align="left">div.dir语言方向：ltr左到右；rtly右到左“ltr” 在元素添加到页面之前，是不会下载外部文件的。...动态样式同动态加载脚本类似，添加到页面之后才会加载资源。

1.5K3 0

Web-第三天 JavaScript学习【悟空教程】

主要应用有：嵌入动态文本于HTML页面、对浏览器事件做出响应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。...1) 在使用JavaScript时，需要遵循以下命名规范：必须以字母或下划线开头，中间可以是数字、字符或下划线变量名不能包含空格等符号不能使用JavaScript关键字作为变量名，如：function...innerHTML ：向页面的某个元素中写一段内容，将原有的东西覆盖 1.3 案例分析 ? 1.4 案例实现步骤1：表单添加提交事件 ?..."); //3 将新创建的a元素，添加到div元素中 // * appendChild 追加子元素 divObj.appendChild(aObj); 7.3 案例实现步骤1：给注册页面添加...执行eval()计算 JavaScript 字符串，并把它作为脚本代码来执行。编码encodeURI() 把字符串编码为 URI。decodeURI()解码某个编码的 URI。

3.4K1 0

前端基础-节点操作

() 用来生成文本节点，参数为所要生成的文本节点的内容； node.appendChild() 接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点； node.hasChildNodes...它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。注意: 不会克隆绑定到该元素上的事件； node.innerHTML 返回该元素包含的 HTML 代码。...如果指定属性不存在，则返回null； node.setAttribute() 为当前元素节点新增属性。...，可设置非标准属性 d.setAttribute('id','ffdd'); d.setAttribute('aa','kk'); //获取属性值，可获取非标准属性 console.log...之前，我们已经简单的使用过JS控制元素的CSS样式；在具体使用的时候还有一些需要重点注意的细节：名字需要改写，将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写：比如background-color

4.3K1 0

JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战（动态添加删除表格）

class的属性值，应用较多； 5、动态表格案例实战 1）添加表格的实现思路： * 1、给添加按钮绑定单击事件 * 2、获取文本框内容 * 3、创建td，设置td的文本为文本框的内容 * 4、创建tr...，将td添加到tr中 * 5、获取table，将tr添加到table中 2）删除表格的实现思路： * 1、确定点击的是哪一个超链接 * 2、再删除 <!...* 1、给添加按钮绑定单击事件 * 2、获取文本框内容 * 3、创建td，设置td的文本为文本框的内容 * 4、创建tr，将td添加到tr...中 * 5、获取table，将tr添加到table中 * 删除： * 1、确定点击的是哪一个超链接 * 2、再删除 * *...:void(0);"); ele_a.setAttribute("onclick","del(this);") var text_a = document.createTextNode

2.2K4 0

Web前端基础知识整理

=function () { //按html元素id查找,将匿名函数与该元素的点击事件捆绑 var arr=new Array(4);...//向数组插入数据 arr[0]="刘备"; //调用数组对象的方法 arr.push("张飞","关羽");//动态追加2个数组元素...java向js传输的是json格式的字符串,要转换成json对象才能被js使用代码: str=eval(str);//str是传来的字符串,转换后变为json对象 eval()//函数:将字符串按照表达式的形式转换为对应的具体类型...web服务器运行的java代码,相当于servlet的service()方法如果想在jsp中写html部分,需要用将jsp语句隔开 jsp内置元素...、jstl(jsp标准标签库语言) 目的是减少jsp上小脚本的数量,作为sun公司推出的jsp辅助技术分类: 核心库:控制程序流程,存储变量的使用和输出 jstl sql库:直接在页面上使用sql

1.9K1 0

JavaScript基本入门教程

，所以自动将字符串转换成数值对于加号运算符，因为字符串可以用加号作为连接运算符，所以自动将数值转换为字符串 其他类型的数据之间的转换可以自行实验，很简单 6）类型转换的常用方法（强制类型转换） toString...()：将布尔类型值、数值等转换成字符串 parseInt()：将字符串、布尔值等转换成整数（不进行四舍五入，直接取整） parseFloat()：将字符串、布尔值等转换成浮点数代码案例： <!...join() 把数组中的所有元素放入到字符串中，按照指定的字符串分隔 pop() 删除最后一个元素并返回 push() 向数组的末尾添加一个或者更多个元素，并返回数组的长度 reverse() 颠倒数组中元素的顺序...：" + arr[7]); // join()方法，把数组中的所有元素放入到字符串中，按照指定的字符串分隔 console.log(arr.join(",...，对象创建完成以后就不会再变了动态地为某个对象添加属性，或者方法，它们只属于这个对象，其他的对象则不会享受这样的属性和方法，而动态地添加类属性，则会改变类的属性。

4.1K2 0

3-DOM

DOM(Document Object Model) 文档对象模型 ---- 概念将标记语言文档（HTML,XML…）的各个部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD动态操作 W3C...Element元素对象通过document获取和创建方法 removeAttribute() 删除指定的属性。 setAttribute() 添加新属性。...="#" onclick="delTr(this)">删除 //添加操作实现...使用innerHTML简化之前的动态表格实例删除 //添加操作实现

1.3K2 0

Java项目：UMS 用户管理系统

method=list"; }else{ //添加失败 getRequest().setAttribute("errorMsg","添加失败");...在JavaBean类中，即User类中，添加一个方法： getInterestString，方法内部对数组拼接字符串，将字符串进行返回。...method=list"; }else{ //添加失败 getRequest().setAttribute("errorMsg","添加失败");...解决方案2：逻辑解决法-令牌机制（以添加操作为例）令牌：随机的字符串，唯一的不重复。令牌机制作用：通过发令牌，比对令牌，保障你的操作是唯一不重复的。...method=list"; }else{ //添加失败 getRequest().setAttribute("errorMsg","添加失败");

3.1K3 0

百度地图BMap API的应用实例

和 CSS 的浏览器兼容总结设计思路：接口是BMap API，内部功能采用模块化设计，搜索模块、自定义添加、右键菜单事件等，这样设计方便扩展和维护，后期将考虑加入谷歌的GMap 下面，详细介绍内部功能是如何设计和实现的...)}; // img.onclick=Function("click(this.value)"); td.appendChild(img);...); } 左侧动态加载数据源效果图： ?...contextMenu.addSeparator(); } } map.addContextMenu(contextMenu); // 添加菜单到...实现代码如下： // 点击左侧查询小图标 function click(obj) { // 先清理所有td元素，擦除上次高亮显示脚印 var td_a =

1.9K3 0

javascript dom学习笔记

window.moveBy(0,-20); } } moveTo(x,y):跟moveBy方法类似，只不过这个是直接将浏览器窗口定位到横轴为...，都用类型的首字母开头+名称，比如： var sName = "张三"; //张三是一个名称，而且是字符串类型的，所以用string类型的开头字母s+name表示这个名称的变量四、DOM...建议：尽量少用兄弟节点，兄弟节点获取到的内容会因为浏览器的不同而解析方式不一样，主要是会解析出标签间的空白节点 4.创建元素并添加到另一个元素中演示1：向一个层中添加一个按钮 /...这里还有一种往元素里添加元素的方法，可以利用元素的innerHTML属性来添加，不过，这个每次添加都是重新覆盖，而appendChild 添加元素是屁股后面追加的操作。 ...checked) sum += parseInt(collCheckBox[i].value); } //将获取到的和赋值到文本框中显示

1.8K1 0

购物车项目+EL表达式+JSTL+数据库

，以“}”作为结束直接使用变量名获取值$ ${ username } 变量属性范围名称属性范围 EL中的名称 page pageScope,例如${...返回应用范围内的变量，并将变量名映射至相应的值 param 返回客户端的请求参数的字符串值 paramValues 返回映射至客户端的请求参数的一组值 pageContext 提供对用户请求和页面信息的访问...JSTL的环境搭建使用JSTL的步骤：在JSP页面添加taglib指令使用JSTL标签 JSTL标准标签库介绍通用标签的使用： set：设置指定范围内的变量值.../td> ${g.binfo } - ${d.gprice } <button onclick="sc(${d.oid })

8893 0

脚本语言知识总结.

pop() 从数组移除最后一个元素 reverse()反转 join() 连接数组元素通过特定内容返回字符串 sort() 排序 slice() 截取数组中指定元素从start到end...DOM 获取节点：节点查询参上 DOM 改变节点：元素属性修改setAttribute(name,value) 内部文本元素的修改 innerHTML DOM 删除节点：removeChild...通过product.jsp 生成HTML片段，返回客户端，客户端Ajax引擎接收，通过innerHTML 将table元素嵌入到页面内部，其思路与案例一类似，这里不做详细介绍。...，支持将json字符串转换javabean对象(反过来只支持这一种，使用很少) 在使用JSON-lib时必须导入至少5个jar包 ?...@XStreamOmitField 设置变量不生成到XML @XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量别名六、jQuery框架 jQuery

5K13 0

03 . 前端之JavaScipt

.pop() 获取尾部的元素 .unshift(ele) 头部插入元素 .shift() 头部移除元素 .slice(start, end) 切片 .reverse() 反转 .join(seq) 将数组元素连接成字符串...连接数组 .sort() 排序 .forEach() 将数组的每个元素传递给回调函数 .splice() 删除元素，并向数组添加新元素。...如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。 item1, ..., itemX 可选。...对象)：代表元素（标签）中的文本 # 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性 # 注释是注释节点(comment对象)　 #　　JavaScript 可以通过DOM创建动态的...函数内部变量提前声明 8.4 序列化 JSON.stringify() # 将对象转换为字符串 JSON.parse() # 将字符串转换为对象类型 # 客户端(cookie

1.4K4 0

JS的常用操作

[ThinkPad1]: 如果 id 是一个字符串，那么必须加上引号，如果是一个变量那么不需要。...元素 element.appendChild() 向元素添加新的子节点，作为最后一个子节点。...element.lastChild 返回元素的最后一个子元素。 element.setAttribute() 把指定属性设置或更改为指定值。...分析：事件(onclick) 获取ul元素节点创建一个城市的文本节点创建一个li元素节点将文本节点添加到li元素节点中去。...第六步：如果相同，遍历该省份下所有的城市第七步：创建城市文本节点第八步：创建option元素节点第九步：将城市文本节点添加到option元素节点中去第十步：获取第二个下拉列表，并将option

8.1K1 0

JavaScript 前端笔记总结(精简)

JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,属于网络的脚本语言,现在已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果...: 如果我们想要定义全局变量,只需要在函数体外部定义,解释器默认将外部变量当成全局变量....: 我们不仅仅可以传递单个的参数,还可以将一个预定义好的数组传递到函数体内部....,来匹配DOM元素,它以中括号作为分界符....,动态添加元素.

7.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭