Skip to content

月份:2008年8月

DOM示例3

    之前学习DOM的时候写的示例,已经发现了两个,现在把第三个也发布出来吧。主要是增加了鼠标操作,可以在DIV标签点击进行编辑。

 

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> DOMDocument 对象示例3 </TITLE>

<STYLE type="text/css">

<!–

.JobFlow {

width: 102px;

position: relative;

background-color: #00CCFF;

padding: 1px;

float: left;

}

.JobStep {

background-color: #00FF99;

height: 100px;

width: 100px;

margin: 1px;

}

.EditDiv {

cursor: hand;

background-color: #00CCFF;

width: 100%;

height: 20;

}

.EditText {

width: 100px;

height: 18;

}

–>

</STYLE>

<SCRIPT language="javascript">

<!–

// XML 原形

var str = "<?xml version=’1.0′?><TS>" +

"<TT><TD>Kend</TD><TD>Programmer</TD></TT>" +

"<TT><TD>小明</TD><TD>技术员</TD></TT></TS>";

// 创建DOM对象并加载XML

var dom = new ActiveXObject("MSXML2.DOMDocument");

dom.loadXML(str);

// 获取DOM里顶层数据行数

var cols = dom.getElementsByTagName("TT").length;

// 动态产生表格并显示

function makeTable(){

var html = "";

// 获取DOM里顶层数据列表

var TTs = dom.getElementsByTagName("TT");

for (var i=0; i<TTs.length; i++)

{

// 获取DOM里第二层数据列表

var TDs = TTs.item(i).getElementsByTagName("TD");

html += "<div class=\"JobFlow\">";

html += "<div class=\"JobTitle\">Job_" + i + "</div>";

for (var j=0; j<TDs.length; j++)

{

html += "<div class=\"JobStep\">" +

"<div class=\"EditDiv\" OnClick=\"editText(" + i + "," + j + ", this);\">" + TDs[j].text + "</div>" +

// "<input size=’10’ type=’text’ onChange=’saveValue(" + i + "," + j + ", this.value);’ value=’" + TDs[j].text + "’ />" +

"<BR />ROW:" + i + "|COL" + j +

"|<a href=’JavaScript:insertAt(" + i + "," + j + ");’>Ins</a></div>";

}

html += "<div><a href=’JavaScript:insertAt(" + i + "," + j + ");’>Append</a></div>";

html += "</div>";

}

// 显示XML代码

document.getElementById("src").innerHTML = "<textarea style=’width:100%; height=100;’>" + dom.xml + "</textarea>";

// 显示HTML代码

document.getElementById("htmlsrc").innerHTML = "<textarea style=’width:100%; height=100;’>" + html + "</textarea>";

// 显示表格

document.getElementById("tt").innerHTML = html;

}

// 创建一个顶层数据

function makeCol() {

var TT = dom.createElement("TT");

var TD1 = dom.createElement("TD");

TD1.text = cols;

TT.appendChild(TD1);

return TT;

}

// 创建一个第二层数据

function makeNode() {

var TD = dom.createElement("TD");

TD.text = cols;

return TD;

}

// 创建一个顶层数据并加到表格最后

function appendCol() {

cols++;

var TS = dom.getElementsByTagName("TS").item(0);

TS.appendChild(makeCol());

makeTable();

}

// 创建一个顶层数据并插入到表格相应地方

function insertAt(x, y) {

cols++;

var TTs = dom.getElementsByTagName("TT");

var TT = TTs.item(x);

TT.insertBefore(makeNode(), TT.childNodes[y]);

makeTable();

}

// 处理编辑框Enter键和Escape键

function editKeyPress(e, x, y, edit){

if (e.keyCode == 13) { // Enter

saveValue(x, y, edit);

resetEdit(x, y, edit);

}

if (e.keyCode == 27) // Escape

resetEdit(x, y, edit);

}

// 保存表格上修改的数据

function saveValue(x, y, edit) {

if (x<0||y<0)

return;

var TTs = dom.getElementsByTagName("TT");

if (x>=TTs.length)

return;

if (y>=TTs.item(x).childNodes.length)

return;

TTs.item(x).childNodes[y].text = edit.value;

// 显示XML代码

document.getElementById("src").innerHTML = "<textarea style=’width:100%; height=100;’>" + dom.xml + "</textarea>";

}

// 重置div

function resetEdit(x, y, edit){

var tmpDiv = document.createElement("DIV");

tmpDiv.className = "EditDiv";

tmpDiv.onclick = "editText(" + x + "," + y + ", this);";

tmpDiv.innerHTML = edit.value;

edit.parentNode.outerHTML = tmpDiv.outerHTML;

}

// 动态编辑数据

function editText(x, y, div) {

if (x<0||y<0)

return;

var TTs = dom.getElementsByTagName("TT");

if (x>=TTs.length)

return;

if (y>=TTs.item(x).childNodes.length)

return;

var editBox = document.createElement("input");

editBox.type = "text";

editBox.className = "EditText";

editBox.value = TTs.item(x).childNodes[y].text;

editBox.onchange = "saveValue(" + x + ", " + y + ", this);";

editBox.onblur = "resetEdit(" + x + ", " + y + ", this);";

editBox.onkeypress = "editKeyPress(event, " + x + ", " + y + ", this);";

div.className = "";

div.onclick = "";

div.innerHTML = editBox.outerHTML;

div.childNodes[0].focus();

}

–>

</SCRIPT>

</HEAD>

<BODY>

<DIV style="height:30;">This page demo3 how to using DOMDocument</DIV>

<DIV style="height:30;">This demo for Job flow in an ERP project</DIV>

<TABLE border="1" align="center"><TR><TD>

<DIV id="tt" style="border:1; background-color:#00ccee;;">Dynamic Face</DIV>

</TD></TR></TABLE>

<DIV>XML Data</DIV>

<DIV id="src" style="width:100%;"></DIV>

<DIV>HTML source</DIV>

<DIV id="htmlsrc" style="width:100%;"></DIV>

<INPUT type="button" onClick="makeTable()" value="Make Table" /><INPUT type="button" onClick="appendCol()" value="Append Col" />

<INPUT name="textfield" type="text" id="textfield" onKeyPress="editKeyPress(event, 2, 3, this)">

</BODY>

</HTML>

[/html]

 

Leave a Comment

把ACER恢复光盘当万能Ghost Vista

    原来ACER恢复光盘里的Vista系统可以恢复到其他机器里使用。事情是这样的,这段时间一直在使用Vista x64版本,经常内存泄漏。想恢复一下原版的系统试试看有没这个问题。可是我老早就把硬盘重新分区了,我怕恢复后我的数据会丢失。因为原装是第二个分区作为系统盘,第一和最后一个分区是隐藏的恢复分区。

    想着,用虚拟机试试吧,反正不需要进入系统。只要看它恢复后数据写到哪个分区就行了,于是昨天就恢复了系统,并且确定了数据是写到第一个分区。或许是活动分区把,反正确定不会把我的数据破坏。

    今天早上回来,觉得反正都恢复到虚拟机里了,看看启动后是否会蓝屏。本来只想试试,竟然正常进入系统了。看来ACER的恢复光盘可以当成万能Ghost Vista使用了。

4 Comments

在WEB打印中不打印页面中的某些内容

    其实很简单,用一个CSS就可以实现了,这个方法同时支持IE和FF。

    HTML内容

[html]

<HTML>

<HEAD>

<TITLE>Test Print</TITLE>

<STYLE type="text/css">

.css1 {

text-align: center;

text-align: center;

height: 250;

width: 400;

background-color: blue;

}

.css2 {

text-align: center;

height: 250;

width: 400;

background-color: red;

}

@media print {

.printbtn, .css1 {

display: none;

}

}

</STYLE>

</HEAD>

<BODY>

<DIV class="printbtn"><INPUT type="button" value="Print" onclick="window.print()"/> Print button can’t print out, But it can display in page.</DIV>

<DIV class="css1"><BR/><BR/><BR/>Not print out</DIV>

<DIV class="css2"><BR/><BR/><BR/>Print out</DIV>

</BODY>

</HTML>[/html]

    主要是在于CSS @media print,这个定义了打印时引用的CSS。css1定义了display: none;,所以打印时css1的类型不会被打印。

Leave a Comment

利用JavaScript动态修改select标签的内容

    标题写得非常简单,实现业务需求比较复杂。业务是这样的,一个页面,要同时修改多行记录。并且可以在这个页面实时添加记录。记录里有一下拉,下拉内容跟随记录行数变动,内容为某一字段。

    复杂吧?我这里说的只是一个小细节,这样的细节还可以多达10多个。真是晕啊。

    这里随便说一下啦,具体要贴代码才能说明白。

Leave a Comment