document在方法外获取对象无法获取数据

案例目的：当我点击添加按钮的时候，表格下方可以添加一行数据

遇到一个问题希望有大佬帮我看看，以下两个代码区别在于使用document获取对象的时候，第一个是在方法外获取对象，第二个是在方法内获取对象

下面是不可以正常执行的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>案例4_动态表格</title><style>table {border: 1px solid;margin: auto;width: 500px;}td, th {text-align: center;border: 1px solid;}div {text-align: center;margin: 50px;}</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="编号">
<input type="text" id="name" placeholder="姓名">
<input type="text" id="gender" placeholder="性别">
<input type="button" id="btn_add" value="添加"><br>
</div>
<table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td><a href="#">删除</a></td></tr><tr><td>2</td><td>林青霞</td><td>女</td><td><a href="#">删除</a></td></tr><tr><td>3</td><td>封茗囧菌</td><td>女</td><td><a href="#">删除</a></td></tr>
</table><script>var btn_add = document.getElementById("btn_add");var tn_a = document.getElementsByTagName("a");var table = document.getElementsByTagName("table")[0];var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//添加子节点btn_add.onclick = function () {//获取对象//创建tdvar td_id = document.createElement("td");var td_name = document.createElement("td");var td_gender = document.createElement("td");var text_id = document.createTextNode(id);var text_name = document.createTextNode(name);var text_gender = document.createTextNode(gender);//添加值td_id.appendChild(text_id);td_name.appendChild(text_name);td_gender.appendChild(text_gender);//创建trvar tr = document.createElement("tr");//td添加到trtr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);//tr添加到tabletable.appendChild(tr);}// //删除节点// for (let i = 0; i < tn_a.length; i++) {//   tn_a[i].onclick = function () {//     tn_a[i].remove//   }// }</script>
</body>
</html>

执行效果图

下面是可以正常执行的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>案例4_动态表格</title><style>table {border: 1px solid;margin: auto;width: 500px;}td, th {text-align: center;border: 1px solid;}div {text-align: center;margin: 50px;}</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="编号">
<input type="text" id="name" placeholder="姓名">
<input type="text" id="gender" placeholder="性别">
<input type="button" id="btn_add" value="添加"><br>
</div>
<table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td><a href="#">删除</a></td></tr><tr><td>2</td><td>林青霞</td><td>女</td><td><a href="#">删除</a></td></tr><tr><td>3</td><td>封茗囧菌</td><td>女</td><td><a href="#">删除</a></td></tr>
</table><script>var btn_add = document.getElementById("btn_add");//添加子节点btn_add.onclick = function () {//获取对象var tn_a = document.getElementsByTagName("a");var table = document.getElementsByTagName("table")[0];var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//创建tdvar td_id = document.createElement("td");var td_name = document.createElement("td");var td_gender = document.createElement("td");var text_id = document.createTextNode(id);var text_name = document.createTextNode(name);var text_gender = document.createTextNode(gender);//添加值td_id.appendChild(text_id);td_name.appendChild(text_name);td_gender.appendChild(text_gender);//创建trvar tr = document.createElement("tr");//td添加到trtr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);//tr添加到tabletable.appendChild(tr);}// //删除节点// for (let i = 0; i < tn_a.length; i++) {//   tn_a[i].onclick = function () {//     tn_a[i].remove//   }// }</script>
</body>
</html>

执行效果图

document在方法外获取对象无法获取数据相关推荐

python网络爬虫系列（七）——selenium的介绍 selenium定位获取标签对象并提取数据 selenium的其它使用方法
一.selenium的介绍知识点: 了解 selenium的工作原理了解 selenium以及chromedriver的安装掌握标签对象click点击以及send_keys输入 1. sele ...
什么是document对象?如何获取文档对象上的元素?_dom对象
DOM对象 1. DOM树当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),通过 HTML DOM对象,可访问 JavaScript HTML 文档的所有 ...
Python 动态获取对象的属性和方法（内含inspect）
首先通过一个例子来看一下本文中可能用到的对象和相关概念. #coding:utf-8 import sysdef foo():passclass Cat(object):def __init__(se ...
js获取对象的方法，根据id、根据name、根据标签名、根据类名
正文下面的代码中展示了常用的js获取html对象的方法,并且添加了详细的注释说明.快来看看吧. // 页面加载完毕以后再执行window.onload=function(){//1.根据id获取对象 ...
Python中面向对象self获取对象属性，魔法方法
类和对象类(Class) 由3个部分构成 01). 类的名称:类名 02). 类的属性:一组数据 03). 类的方法:允许对进行操作的方法 (行为) 定义类 object 是Python 里所有类的 ...
【java】java反射机制，动态获取对象的属性和对应的参数值，并属性按照字典序排序，Field.setAccessible()方法的说明【可用于微信支付签名生成】...
方法1:通过get()方法获取属性值 package com.sxd.test.controller;public class FirstCa{private Integer num;private ...
【Groovy】MOP 元对象协议与元编程 ( Groovy 类内部和外部分别获取 metaClass | 分析获取 metaClass 操作的字节码 | HandleMetaClass 注入方法 )
文章目录一.Groovy 类内部和外部分别获取 metaClass 二.分析 Groovy 类内部和外部获取 metaClass 操作的字节码三.使用 HandleMetaClass 注入方法一 ...
php 获取js对象的属性值,js获取对象,数组所有属性键值(key)和对应值(value)的方法示例...
本文实例讲述了js获取对象,数组所有属性键值(key)和对应值(value)的方法.分享给大家供大家参考,具体如下: var values=function(object) { var values ...
JavaScript中的内置对象-8--4.date对象中-获取,设置日期时间的方法; 获取,设置年月日时分秒及星期的方法;...
学习目标 1.掌握创建日期对象的方法 2.掌握date对象中获取日期时间的方法 3.掌握date对象中设置日期时间的方法如何创建一个日期对象语法:new Date(); 功能:创建一个日期时间对象 ...

document在方法外获取对象无法获取数据

document在方法外获取对象无法获取数据相关推荐

最新文章

热门文章