【视频】javascript16-17 列表收起弹出和使用DOM创建表格

来源：互联网发布：常用国家域名编辑：程序博客网时间：2024/06/06 07:22

创建一个可折叠的div

<script type="text/javascript">function change() {var dlNode = event.srcElement.parentNode;//获取的是触发这个函数的对象的父节点//也就是某一个dt的dl//这样在多个dl下也能够很好的适应//但是这样做Firefox不能跑//其实还有一种更好的方法，就是在触发这个事件的时候，将this参数传过去//dlNode直接就是传过啦的参数了if(dlNode.className == "close") {dlNode.className = "open";} else {dlNode.className = "close";}}</script><style type="text/css">.close {overflow:hidden;height:16px;}.open {overflow:visible;height:64px;}</style></head><body><dl><dt onClick="change();">我有一个梦想</dt><dd>我梦想世界和平</dd>    <dd>我梦想天天开心</dd>    <dd>我梦想你能幸福</dd></dl><dl><dt onClick="change();">我有一个梦想</dt><dd>我梦想世界和平</dd>    <dd>我梦想天天开心</dd>    <dd>我梦想你能幸福</dd></dl><dl><dt onClick="change();">我有一个梦想</dt><dd>我梦想世界和平</dd>    <dd>我梦想天天开心</dd>    <dd>我梦想你能幸福</dd></dl></body>

这是另一个例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script type="text/javascript">function change(aNode) {var allDiv = document.getElementsByTagName("div");for(var x = 0; x < allDiv.length; x++) {allDiv[x].style.display = "none";}var divNode = aNode.parentNode.getElementsByTagName("div")[0];//这里通过父节点td，来获取到td中的div节点//为什么要通过父节点而不是兄弟节点呢？//原因：在这里父节点是唯一的，它只可能是td，而td的div子节点也是唯一的，只有一个div//然而兄弟节点就不同了，兄弟节点可能是那个空白的text，也有可能是div//为了保险起见，还是通过父节点来好一点if(divNode.style.display == "inherit") {divNode.style.display = "none";} else {divNode.style.display = "inherit";}}</script><style type="text/css">table {border:#000 1px solid;}table td  {border:#666 1px solid;background-color:#6F6;}table div {background-color:#DAFFD7;display:none;}table td a:link, table td a:visited {text-decoration:none;color:#01650B;}</style></head><body><table><tr><td><a href="javascript:void(0)" onClick="change(this);">好友菜单列表</a>            <div>            我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>            </div></td></tr>        <tr><td><a href="javascript:void(0)" onClick="change(this);">好友菜单列表</a>            <div>            我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>            </div></td></tr>        <tr><td><a href="javascript:void(0)" onClick="change(this);">好友菜单列表</a>            <div>            我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>            </div></td></tr>        <tr><td><a href="javascript:void(0)" onClick="change(this);">好友菜单列表</a>            <div>            我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>                我叫小明，你叫什么哇<br>            </div></td></tr> </table></body></html>

创建表格的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script type="text/javascript">function createTable() {var row = document.getElementsByTagName("input")[0].value;var col = document.getElementsByTagName("input")[1].value;var tableNode = document.createElement("table");tableNode.setAttribute("id", "MyTable");for(var i = 0; i < row; i++) {var trNode = tableNode.insertRow();for(var j = 0; j < col; j++) {var tdNode = trNode.insertCell();tdNode.innerHTML = i+ "...." + j;}}document.getElementsByTagName("div")[0].appendChild(tableNode);document.getElementsByTagName("input")[2].disabled = true;}function delRow() {var table = document.getElementById("MyTable");if(!table) {alert("请先创建表格");return;}if(document.getElementById("delRow").value > 0 && document.getElementById("delRow").value < table.rows.length)table.deleteRow(document.getElementById("delRow").value);else alert("没有这么多行哇！");}function delCol() {var table = document.getElementById("MyTable");var delCol = document.getElementById("delCol").value;if(!table) {alert("请先创建表格");return;}if(document.getElementById("delCol").value > 0 && document.getElementById("delCol").value < table.rows[0].cells.length) {for(var x = 0; x < table.rows.length; x++) {table.rows[x].deleteCell(delCol);}}else alert("没有这么多行哇！");}</script><style type="text/css">table, tr , td{border:black 1px solid;margin:10px;}</style></head><body>行：<input type="text" name="row"><br>列：<input type="text" name="col"><input type="button" value="创建表格" onClick="createTable();"><div></div><input type="text" id="delRow"><input type="button" value="删除行" onClick="delRow();"><br><input type="text" id="delCol"><input type="button" value="删除列" onClick="delCol();"></body></html>

0 0