澳门新葡萄京官网注册如何用 JavaScript 复制表格的行?

for (var i = 0; i < 15; i++)
{
    var node = document.getElementById(“item”).cloneNode(true);
    node.id = “item_” + (i + 1);
    document.getElementById(“item”).parentNode.appendChild(node);
}

首先,我们创建一个table元素
接着,创建一个TBODY元素,它应该是TABLE元素的子元素,
但是现在现在它们之间没有联系。
接着,使用一个循环创建TR元素,它们应该是TBODY元素的子元素。
对于每一个TR,我们使用一个循环创建TD元素,它们是TR的子元素。
对于每一个TD,我们创建一个文本节点元素
现在,我们创建好了这些TABLE, TBODY, TR,
TD还有文本元素,但是它们之间的层级
关系并没有建立起来。然后我们以上相反的顺序把每一个对象添加到它的父节点上。
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
mytablebody.appendChild(mycurrent_row);
mytable.appendChild(mytablebody);
现在DOM层次如下:
BODY

var mylist=document.getElementById(“mylist”)

  • cloneNode 的参数为 true,表示复制子节点;如果为 false 的话,就只复制
    tr,tr 下面的 td 不会被复制。
  • 不要用 innerHTML 代替 cloneNode。
  • 不能把 cloneNode 这句提到循环外面。
  • 要给复制的 node 赋唯一的 id。

DOM Element 常用方法
1、appendChild(node)
向当前节点对象的追加节点。经常用于给页面动态的添加内容。
例如下面给div添加一个文本节点:

首先,我们创建一个table元素
接着,创建一个TBODY元素,它应该是TABLE元素的子元素,
但是现在现在它们之间没有联系。接着,使用一个循环创建TR元素,它们应该是TBODY元素的子元素。对于每一个TR,我们使用一个循环创建TD元素,它们是TR的子元素。
对于每一个TD,我们创建一个文本节点元素现在,我们创建好了这些TABLE,
TBODY, TR,
TD还有文本元素,但是它们之间的层级关系并没有建立起来。然后我们以上相反的顺序把每一个对象添加到它的父节点上。mycurrent_cell.appendChild(currenttext);mycurrent_row.appendChild(mycurrent_cell);mytablebody.appendChild(mycurrent_row);mytable.appendChild(mytablebody);

相关阅读

上面的例子中给DIV添加文本,也可以用newdiv.innerHTML=”A new div”实现,
不过innerHTML不属于DOM
2、removeChild(childreference)
移除当前节点的子节点,返回被移除的节点。这个被移除的节点可以被插入document树中别的地方

</script>

代码很简单,但是有些说明很重要:

<body>
<div id=’divid’><p>h</p>
Just for testing;
</div>
<div id=’divid’>
Just for testing;
</div>
<script>
var div=document.getElementById(‘divid’);
alert(div.nodeName);
</script>
</body>

mybody.appendChild(mytable);       //把mytable的border
属性设置为2        mytable.setAttribute(“border”,”2″);   
}</script></head><body
onload=”start()”></body></html>

  • cloneNode(deep) deep 的 true、false
    意义
  • insertBefore、appendChild
    会删除源节点
  • 如何正确地给 table 追加
    tr

复制代码 代码如下:

<script type=”text/javascript”>

<table>
  <tr id=”item”>
    <td>cftea</td>
    <td>千一</td>
  </tr>
</table>

4、replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点
例如:

DOM Element 常用方法
1、appendChild(node)
向当前节点对象的追加节点。经常用于给页面动态的添加内容。

如上代码,如何把 item 复制很多份呢,让表格有很多行?

<p><b>新人类,什么?!</b></p>
<script type=”text/javascript”>
window.onload=function(){
document.getElementsByTagName(“p”)[0].innerHTML=”<b>新新人类,什么?!</b>”
}
</script>

    function start() {

复制代码 代码如下:

<p id=”mypara”>11111</p>

<script>
function wow() {
alert(“我好象没有点鼠标啊”);
}
</script>
<div id=”test” onclick=’wow()’>hhh</div>
<script type=”text/javascript”>
var div = document.getElementById(“test”);
div.click();
</script>

        //创建一个<TBODY></TBODY>元素

复制代码 代码如下:

        //把 TBODY 添加到 TABLE

TD—–TD—–TD TD—–TD—–TD TD—–TD—–TD

</script>

复制代码 代码如下:

第一个例子:
使用DOM1.0  的javascript动态地创建一个HTML table。
<head>

3、getElementsByTagName(tagname)
getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表(数组)。你可以遍历这个数组获得每一个单独的子元素。当处理很大的DOM结构,使用这种方法可以很容易的所有缩小范围。

   alert(“This is a DIV”);

复制代码 代码如下:

<script type=”text/javascript”>

<body>
<input name=’divid’ type=”text”/>
<div id=’divid’>
Just for testing;
</div>
<script>
var div=document.getElementById(‘divid’);
alert(div.nodeName);
</script>
</body>

4、replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点
例如:<div id=”adiv”><span
id=”innerspan”>span</span></div><script
type=”text/javascript”>var
oldel=document.getElementById(“innerspan”);var
newel=document.createElement(“p”);var
text=document.createTextNode(“ppppp”);

<div id=”test”></div>
<script type=”text/javascript”>
var newdiv=document.createElement(“div”)
var newtext=document.createTextNode(“A new div”)
newdiv.appendChild(newtext)
document.getElementById(“test”).appendChild(newdiv)
</script>

 作者:yhh345814509

复制代码 代码如下:

        }

复制代码 代码如下:

        var mybody=document.getElementsByTagName(“body”).item(0);

DOM Element的属性:(下面是常用的。IE5.0以上,mozllia都支持的)
1、childeNodes 返回所有子节点对象,
例如

   for(j=0;j<tr.childNodes[j].length; j++) {

复制代码 代码如下:

<p><b>新人类,什么?!</b></p>

<head>
<title>Sample code </title>
<script>
function start() {
//获得body的引用
var mybody=document.getElementsByTagName(“body”).item(0);
//创建一个<table></table>元素
mytable = document.createElement(“TABLE”);
//创建一个<TBODY></TBODY>元素
mytablebody = document.createElement(“TBODY”);
// 创建行列
for(j=0;j<3;j++) {
//创建一个<TR></TR>元素
mycurrent_row=document.createElement(“TR”);
for(i=0;i<3;i++) {
//创建一个<TD></TD>元素
mycurrent_cell=document.createElement(“TD”);
//创建一个文本元素
currenttext=document.createTextNode(“cell is row “+j+”, column “+i);
//把新的文本元素添加到单元TD上
mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
//把单元TD添加到行TR上
mycurrent_row.appendChild(mycurrent_cell);
}
//把行TR添加到TBODY上
mytablebody.appendChild(mycurrent_row);
}
// 把 TBODY 添加到 TABLE
mytable.appendChild(mytablebody);
// 把 TABLE 添加到 BODY
mybody.appendChild(mytable);
// 把mytable的border 属性设置为2
mytable.setAttribute(“border”,”2″);
}
</script>
</head>
<body onload=”start()”>
</body>
</html>

<tr><td>一个和尚有水喝。</td></tr>

<div id=’test’>ddd</div>
<script>
if (document.getElementById(“test”).nodeName==”DIV”)
alert(“This is a DIV”);
</script>

<tr><td>两个和尚挑水喝。</td></tr>

注意使用这个函数时如果元素的ID不是唯一的,那么会获得第一个符合条件的元素。
在IE6中如果input、checkbox,radio. 等元素name匹配指定的ID,也会被访问到
例如下面的例子中,获得的元素是input:

}

第一个例子:
使用DOM1.0 的javascript动态地创建一个HTML table。

                // appends the cell TD into the row TR

<div id=”adiv”><span
id=”innerspan”>span</span></div>
<script type=”text/javascript”>
var oldel=document.getElementById(“innerspan”);
var newel=document.createElement(“p”);
var text=document.createTextNode(“ppppp”);
newel.appendChild(text);
document.getElementById(“adiv”).replaceChild(newel, oldel);
</script>

document.getElementsByTagName(“p”)[0].innerHTML=”<b>新新人类,什么?!</b>”

6、click()
执行元素的一次点击,可以用于通过脚本来触发onClick函数

上面的例子中给DIV添加文本,也可以用newdiv.innerHTML=”A new div”实现,

2、innerHTML
这是一个事实上的标准,不属于w3c
DOM,但是几乎所有支持DOM的浏览器,都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。

                //把新的文本元素添加到单元TD上

5、insertBefore(newElement, targetElement)
给当前节点插入一个新节点,如果targetElement被设置为null,那新节点被当作最后一个子节点插入,否则那新节点应该被插入targetElement之前的最近位置。

<script>

<p id=”mypara”>11111</p>
p=document.getElementById(“mypara”)
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);

//创建一个<TR></TR>元素

1、getElementById(id)
通过元素的ID访问元素,这是DOM一个基础的访问页面元素的方法,我们要经常用到它.
例如下面的例子,我们可以同DIV的ID迅速的访问到它,而不必通过DOM层层遍历,

例如下面给div添加一个文本节点:

复制代码 代码如下:

                currenttext=document.createTextNode(“cell is row “+j+”,
column “+i);

)
通过元素的ID访问元素,这是DOM一个基础的访问页面元素的方法,我们要经常用到它.
例如下面的例子,我们可以同DIV的…

        //创建行列

2、getElementsByName(name)
返回名字是name的元素数组,在IE6中元素ID匹配这个名字的话,这个元素也将包括在内,而且getElementsByName()仅用于象input,radio,checkbox等元素对象。
象下面例子中georges数组的长度应该是0。

//以下是图片图层的运用

复制代码 代码如下:

2、innerHTML
这是一个事实上的标准,不属于w3c
DOM,但是几乎所有支持DOM的浏览器,都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。

TBODY

</script>
5、insertBefore(newElement, targetElement)
     
给当前节点插入一个新节点,如果targetElement被设置为null,那新节点被当作最后一个子节点插入,否则那新节点应该被插入targetElement之前的最近位置。

复制代码 代码如下:

            mycurrent_row=document.createElement(“TR”);

<html>
<head>
<title></title>
<script>
function start() {
// 获得所有tagName是body的元素(当然每个页面只有一个)
myDocumentElements=document.getElementsByTagName(“body”);
myBody=myDocumentElements.item(0);
// 获得body子元素种的所有P元素
myBodyElements=myBody.getElementsByTagName(“p”);
// 获得第二个P元素
myP=myBodyElements.item(1);
//显示这个元素的文本
alert(myP.firstChild.nodeValue);
}
</script>
</head>
<body onload=”start()”>
<p>hi</p>
<p>hello</p>
</body>
</html>

   }

<table id=”mylist”>
<tr><td>一个和尚有水喝。</td></tr>
<tr><td>两个和尚挑水喝。</td></tr>
<tr><td>三个和尚没水喝。</td></tr>
</table>
<script>
var msg=””
var mylist=document.getElementById(“mylist”)
for (i=0; i<mylist.childNodes.length; i++){
var tr=mylist.childNodes[i];
for(j=0;j<tr.childNodes[j].length; j++) {
var td=tr.childNodes[j];
msg+=td.innerText;
}
}
alert(msg);
</script>

var removednode=document.getElementById(“father”).removeChild(childnode)

<body>
<div name=”george”>f</div>
<div name=”george”>f</div>
<script type=”text/javascript”>
var georges=document.getElementsByName(“george”);
alert(georges.length);
</script>
</body>

        mytable = document.createElement(“TABLE”);

<div id=”father”><div id=”child”>A
child</div></div>
<script type=”text/javascript”>
var childnode=document.getElementById(“child”)
var
removednode=document.getElementById(“father”).removeChild(childnode)
</script>

</table>

3、style
返回一个元素的style对象的引用,通过它我们可以获得并修改每个单独的样式。
例如下面的脚本可以修改一个元素的背景色
document.getElementById(“test”).style.backgroundColor=”yellow”
4、firstChild 返回第一个子节点
5、lastChild 返回最后一个子节点
6、parentNode 返回父节点的对象。
7、nextSibling 返回下一个兄弟节点的对象
8、previousSibling 返回前一个兄弟节点的对象
9、nodeName 返回节点的HTML标记名称,使用英文的大写字母,如P, FONT
例如

var newtext=document.createTextNode(“A new div”)

复制代码 代码如下:

<script type=”text/javascript”>

3、cloneNode(deepBoolean)
复制并返回当前节点的复制节点,这个复制得到的节点是一个孤立的节点,不在document树中。复制原来节点的属性值,包括ID属性,所以在把这个新节点加到document之前,一定要修改ID属性,以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。
这个方法支持一个布尔参数,当deepBoolean设置true时,复制
当前节点的所有子节点,包括该节点内的文本。

document.getElementById(“adiv”).replaceChild(newel, oldel);

TR——————-TR——————TR

//创建一个文本元素

TABLE

div.click();

复制代码 代码如下:

var msg=””

复制代码 代码如下:

  var alert=document.createElement(“<div onmousedown=MouseDown(this)
onmousemove=MouseMove() onmouseup=MouseUp()>”);
  alert.id=”messgebox”;
  alert.innerHTML='<img src=”baidu_sylogo1.gif” 
ondblclick=”Hlose()” />’;//不能用小写的close()否则将不识别  ;
with(alert.style)
{
  position = “absolute”;
  left = “37%”;
  top = “30%”;
  width = “500px”;
  height = “500px”;
}
document.body.appendChild(alert);//添加图层 div;
function Hlose()//清楚添加的两个div
{
 document.body.removeChild(document.getElementById(“layer”));
 document.body.removeChild(document.getElementById(“messgebox”));
 
}

<body>
<span id=”lovespan”>熊掌我所欲也!</span>
</body>
<script type=”text/javascript”>
var lovespan=document.getElementById(“lovespan”)
var newspan=document.createElement(“span”)
var newspanref=document.body.insertBefore(newspan, lovespan)
newspanref.innerHTML=”鱼与”;
</script>

</script>

alert(“我好象没有点鼠标啊”);

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<style type=”text/css”>
body {
margin:0;
padding:0;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″
/>
<title>弹层效果</title>
<script language=”javascript”>
function msgbox(){

pclone = p.cloneNode(true);

   var tr=mylist.childNodes[i];

                mycurrent_cell.appendChild(currenttext);

<div id=”test”></div>

//把行TR添加到TBODY上

newdiv.appendChild(newtext)

        mytablebody = document.createElement(“TBODY”);

        mytable.appendChild(mytablebody);

不过innerHTML不属于DOM
 

p=document.getElementById(“mypara”)

</script>
</head>

3、cloneNode(deepBoolean)

</script>

<script>

例如

<script type=”text/javascript”>

window.onload=function(){

                //把单元TD添加到行TR上
                mycurrent_row.appendChild(mycurrent_cell);

<div id=’test’>ddd</div>

        //创建一个<table></table>元素

DOM Element的属性:(下面是常用的。IE5.0以上,mozllia都支持的)
 

<table id=”mylist”>

</script>

<div id=”father”><div id=”child”>A
child</div></div>

/禁止键盘按F5刷新

//以下代码是图层的移动 方法
var Obj;
function MouseDown(obj)
{
  Obj=obj;
  Obj.setCapture();
  Obj.l=event.x-Obj.style.pixelLeft;
  Obj.t=event.y-Obj.style.pixelTop;
}
function MouseMove()
{
  if(Obj!=null)
  {
    Obj.style.left = event.x-Obj.l;
    Obj.style.top = event.y-Obj.t;
  }
}
function MouseUp()
{
  if(Obj!=null)
  {
    Obj.releaseCapture();
    Obj=null;
  }
}

p.parentNode.appendChild(pclone);

document.getElementById(“test”).style.backgroundColor=”yellow”

复制并返回当前节点的复制节点,这个复制得到的节点是一个孤立的节点,不在document树中。复制原来节点的属性值,包括ID属性,所以在把这个新节点加到document之前,一定要修改ID属性,以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。

<script>

            mytablebody.appendChild(mycurrent_row);

4、firstChild    返回第一个子节点
5、lastChild     返回最后一个子节点
6、parentNode   返回父节点的对象。
7、nextSibling   返回下一个兄弟节点的对象
8、previousSibling返回前一个兄弟节点的对象
9、nodeName返回节点的HTML标记名称,使用英文的大写字母,如P, FONT

<tr><td>三个和尚没水喝。</td></tr>

for (i=0; i<mylist.childNodes.length; i++){

html PUBLIC -//W3C//DTD XHTML 1.0
Transitional//EN
html xmlns= head style
type=text/css…

//背景图层的生成块
var msg = document.createElement(“div”);
msg.id = “layer”;
msg.innerHTML=”<a href=’; oh my gold is very
good!</a>”;
with(msg.style)
{
width = “100%”;
height = document.documentElement.clientHeight + “px”;
background = “#412572”;
position = “absolute”;
left = “0”;
top = “0”;
filter = ‘Alpha(opacity=70)’;//设置透明度
opacity = ‘0.7’;//不透明度
}
document.body.appendChild(msg);

      msg+=td.innerText;

alert(msg);

3、style
返回一个元素的style对象的引用,通过它我们可以获得并修改每个单独的样式。

            }

<script>

                mycurrent_cell=document.createElement(“TD”);

例如下面的脚本可以修改一个元素的背景色

<div id=”test” onclick=’wow()’>hhh</div>

2、removeChild(childreference)
移除当前节点的子节点,返回被移除的节点。这个被移除的节点可以被插入document树中别的地方

}

function wow() {

</script>

}

<body>
<div style=”text-align:center;margin-top:20%;”>
<input type=”button” value=”显示” onclick=”msgbox()” />
</div>
</body>
</html>

<body><span
id=”lovespan”>熊掌我所欲也!</span></body><script
type=”text/javascript”>var
lovespan=document.getElementById(“lovespan”)var
newspan=document.createElement(“span”)

document.getElementById(“test”).appendChild(newdiv)

例如

newel.appendChild(text);

这个方法支持一个布尔参数,当deepBoolean设置true时,复制当前节点的所有子节点,包括该节点内的文本。

<title>Sample code </title>

if (document.getElementById(“test”).nodeName==”DIV”)

        //获得body的引用

</script>

            for(i=0;i<3;i++) {

1、childeNodes返回所有子节点对象,

var childnode=document.getElementById(“child”)

var newspanref=document.body.insertBefore(newspan,
lovespan)newspanref.innerHTML=”鱼与”;</script>

var newdiv=document.createElement(“div”)

var div = document.getElementById(“test”);

6、click()
执行元素的一次点击,可以用于通过脚本来触发onClick函数

    //创建一个<TD></TD>元素

        for(j=0;j<3;j++) {

 

document.onkeydown=function()
{
 if(event.keyCode==116)
 {
  event.keyCode=0;
  event.returnValue=false;
  }
 }
 

      var td=tr.childNodes[j];

发表评论

电子邮件地址不会被公开。 必填项已用*标注