javascript-JavaScript操作DOM的问题

问题描述

JavaScript操作DOM的问题

用JavaScript操作DOM动态的增加表格,实在看不出代码有什么问题?执行时又实现不了,是浏览器的问题吗?我用360极速浏览器,chrome,IE都试过了,都不行。。求大神指教。。

www.mldnjava.cn
<br>
function addrow(){<br>
var tab=document.getElementById(&quot;mytab&quot;);<br>
var id=document.getElementById(&quot;id&quot;).value;<br>
var name=document.getElementById(&quot;name&quot;).value;<br>
var tbody=document.createElement(&quot;tbody&quot;);<br>
var tr=document.createElement(&quot;tr&quot;);<br>
var td_id=document.createElement(&quot;td&quot;);<br>
var td_name=document.createElement(&quot;td&quot;);<br>
td_id.appendChild(document.createTextNode(id));<br>
td_name.appendChild(document.createTextNode(name));<br>
tr.appendChild(td_id);<br>
tr.appendChild(td_name);<br>
tbody.appendChild(tr);<br>
tab.appendChild(tbody);<br><br>
}<br>

新的编号:
新的姓名:


编号 姓名

解决方案

dom对象的name改为id,因为你用的document.getElementById

        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
     新的编号:<input type="text" id="id">
    新的姓名:<input type="text" id="name">

解决方案二:

javascript 操作 dom
JavaScript操作DOM
JavaScript操作DOM

解决方案三:

你这个代码完全没有张贴好,尤其是下面的html部分,都没有了,你最好重新粘贴好

解决方案四:

基本明白你的意思了,function addrow(){
var tab=document.getElementById("mytab");
var tbodyInfo="

"
tab.appendChild(tbodyInfo);
}
解决方案五:

 function addrow(){
var tab=document.getElementById(&quot;mytab&quot;);
var tbodyInfo="<tr><td><input type='text' name='your textbox name' /></td><td><input type='text' name='your textbox name' /></td></tr>"
tab.appendChild(tbodyInfo);
}

解决方案六:

发现代码没粘贴好。。。重新发一次。。

www.javascript_dom.cn
<br>
function addrow(){<br>
var tab=document.getElementById(&quot;mytab&quot;);<br>
var id=document.getElementById(&quot;id&quot;).value;<br>
var name=document.getElementById(&quot;name&quot;).value;<br>
var tbody=document.createElement(&quot;tbody&quot;);<br>
var tr=document.createElement(&quot;tr&quot;);<br>
var td_id=document.createElement(&quot;td&quot;);<br>
var td_name=document.createElement(&quot;td&quot;);<br>
td_id.appendChild(document.createTextNode(id));<br>
td_name.appendChild(document.createTextNode(name));<br>
tr.appendChild(td_id);<br>
tr.appendChild(td_name);<br>
tbody.appendChild(tr);<br>
tab.appendChild(tbody);<br>
}<br>

新的编号:
新的姓名:


编号 姓名

解决方案七:


不知道为什么粘贴代码发上去还是一样的问题。。直接上图吧。。

时间: 2024-11-27 16:27:49

javascript-JavaScript操作DOM的问题的相关文章

JavaScript框架操作DOM改变网页元素的内容和外观

DOM操作 在此之前,你已经看到JavaScript框架使用选择器和DOM遍历可以很容易的获得特定的元素.但是,为了改变网页上特定元素的内容和外观,你需要操作DOM并应用改变.使用纯粹的JavaScript将是一件繁重的工作,但幸运的是,大多数JavaScript框架提供有用的函数,可以很容易地做到这些. 假设你有一个ID为the-box的盒子. <div id="the-box">Message goes here</div> 使用jQuery将其文本改变为&

Ajax实战:使用JavaScript操作DOM

在任何应用中,我们都需要在用户的使用过程中改变用户界面,为用户执行 的操作和完成的进度提供反馈.这些反馈包括修改单个元素的标签或颜色.弹出 临时的对话框.使用一组全新的UI组件替换大部分的屏幕内容等等.到目前为止 ,最常见的方式就是,通过提供给浏览器一段声明式的HTML来构造DOM树(换句话 说,也就是编写HTML页面). 我们在代码清单2-2和图2-3中显示的文档有点太大和太复杂了,还是从小的 步骤开始做DOM操作吧.假设我们要向用户显示友好的问候.当页面第一次加载 的时候,我们并不知道他的名

你所不了解的javascript操作DOM的细节知识点(一)

这篇文章主要介绍了你所不了解的javascript操作DOM的细节知识点的相关资料,需要的朋友可以参考下 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节点的类型,节点类型在Node类型中有以下几种: Node.ELEMENT_NODE(1); 元素节点 Node.ATTRIBUTE_NODE(2); 属性节点 Node.TEXT_NODE(3); 文本节点 Node.DOCUMENT_NODE(9); 文

JavaScript操作DOM的那些坑

js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的"坑". DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容. PS:IE 中的所有 DOM 对象都是以 COM 对象的形式实现的,这意味着 IE 中的 DOM可能会和其他浏览器有一定的差异. Node 接口 firstChild 相当于 childNodes[0];lastChild 相当于childNodes[box.childN

Javascript操作DOM常用API总结

转载自:http://www.cnblogs.com/lrzw32/p/5008913.html Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现

基于JavaScript操作DOM常用的API小结_javascript技巧

前言 DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口).DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 脱胎于 Netscape 及微软公司创始的 DHTML(动态 HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. 阅读目录 基本概念 节点创建型api 页面修改型API 节点查询型API 节点关系型api 元素属性型api 元素样式型api 总结 文本整

JavaScript利用HTML DOM进行文档操作的方法_javascript技巧

HTML DOM 树 一.DOM简介 DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准. W3C文档对象模型(DOM)是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口 核心DOM:用于任何结构化文档的标准模型 XML DOM:用于XML文档的标准模型.是用于获取.更改.添加或删除XML元素的标准. HTML DOM: 用于HTML文档的标准模型.定义了所有HTML元素的对象和属性,以及访问它们的方法(接口). 二.DOM节点 根据DOM规

JavaScript操作DOM元素的childNodes和children区别_javascript技巧

对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象. 具体看一下针对children和childNodes在chrome环境下的测试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</

Javascript教程:如何操作dom

文章简介:前两章讲了获取DOM元素.这章就开始讲如何操作dom.1.针对页面上有的DOM元素操作,无非就是对这个dom元素的样式进行操作.如果这个DOM元素没有样式也就谈不上操作了.2.我们也可以直接用JS动态的向html里写入DOM元素. 前两章讲了获取DOM元素.这章就开始讲如何操作dom.1.针对页面上有的DOM元素操作,无非就是对这个dom元素的样式进行操作.如果这个DOM元素没有样式也就谈不上操作了.2.我们也可以直接用JS动态的向html里写入DOM元素.今天这章我们就讲这两个应用(

为什么说JavaScript中的DOM操作很慢

一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来. 首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局 (layout)和绘制(paint).下面主要先介绍下这些浏览器行为,阐述一个页面是怎么最终被呈现出来的,另外还会从代码的角度,来说明一些不好的 实践以及一些优化方案. 浏览器是如何呈现一张页面的 一个浏览器有许多模块,其中负责呈现页面的是渲