dom的综合练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dom的综合练习</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<style type="text/css">
<!-- .txtStyle{ font-weight: bold; font-size:20px; text-align:center;height:30;}
table{width:500px; background-color:#99ccff; bgcolor:#000000;}
.btnStyle{width:80; height:30}-->
</style>
<script type="text/javascript">
function addSort() {
var txtInput = document.getElementById("txt");
if (txtInput.value == "") {
alert("请输入分类！");
return;
}
//检测分类名是否已经存在 根据<td>中的tag属性来找“类型”文本
if(txtInput.value!=""){
var txtTable = document.getElementById("sortList");
var txtCells = txtTable.getElementsByTagName("tr"); //为tr数组
var txtTr="";
for (var i = 0; i < txtCells.length; i++) {
txtTr = txtCells[i].childNodes[0].innerHTML; //第一个td的文本
if (txtTr == txtInput.value) {
alert("已经有该分类！，请重新填写");
txtInput.value = "";
return;
}
// else {document.write("你妹");}
}
}
//==================================================
//添加一个类别单元格代码
var row = document.createElement("tr");
row.setAttribute("id", txt);
row.bgColor = "#99FF99";
var cell = document.createElement("td");
cell.bgColor = "#6699cc";
var txtNode = document.createTextNode(txtInput.value);
cell.appendChild(txtNode);
row.appendChild(cell);
//==================================================
//添加一个 按钮单元格代码
cell = document.createElement("td");
var delbtn = document.createElement("input");
delbtn.setAttribute("type", "button");
// delbtn.setAttribute("tag","txt");//加入一个区分标记来识别是分类文本
delbtn.setAttribute("value", "删除");
delbtn.setAttribute("class", "btnStyle");
delbtn.onclick = function () { delSort(txt); }
cell.appendChild(delbtn);
row.appendChild(cell);
document.getElementById("sortList").appendChild(row);
txtInput.value = "";
}
function delSort(id) {
if (id != null) {
var rowToDel = document.getElementById(id);
var sortList = document.getElementById("sortList");
sortList.removeChild(rowToDel);
}
}
</script>
</head>
<body>
<table border="1px" bgcolor="">
<tbody class="txtStyle">
<tr class="txtSyle">
<td class="txtSyle" colspan="3">
分类管理
</td>
</tr>
<tr height="30">
<td width="179">请输入分类名称：</td>
<td width="179"><input id="txt" type="text" size="20" height="30"/></td>
<td width="120"><input class="btnStyle" type="button" onclick="addSort()" size="20" height="30" value="添加"/></td>
</tr>
<tr>
<td class="txtStyle" colspan="3">已添加的分类</td>
</tr>
</tbody>
</table>
<table border="1">
<tr height="30">
<td width="363">分类名称</td>
<td>操作</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</body>
</html>
