jsday07(页面通过按钮打开其他页面 创建删除表格行列)

来源:互联网 发布:isight9.0软件下载 编辑:程序博客网 时间:2024/06/09 04:13
<title>无标题文档</title><script type="text/javascript">function opendemo(page){    window.open(page,"_blank","");}</script><style type="text/css">table ,table th{    border:#00F 1px solid;    width:600px;}table th {    padding:10px;    }</style></head><body><table>    <tr>        <th>            <input type="button" value="演示展开闭合效果" onclick="opendemo('js-1.html')" />        </th>        <th>            <input type="button" value="" onclick="opendemo()" />        </th>        <th>            <input type="button" value="" onclick="opendemo()" />        </th>    </tr>    <tr>        <th>            <input type="button" value="" onclick="opendemo()" />        </th>        <th>            <input type="button" value="" onclick="opendemo()" />        </th>        <th>            <input type="button" value="" onclick="opendemo()" />        </th>    </tr>    <tr>        <th>            <input type="button" value="" onclick="opendemo()" />        </th>        <th>            <input type="button" value="" onclick="opendemo()" />        </th>        <th>            <input type="button" value="" onclick="opendemo()" />        </th>    </tr></table></body>

之前并没有直接删除列的方法 要通过删除每一行中的元素(单元格)cell来完成

<script type="text/javascript" src="doctool.js"> </script><link rel="stylesheet" href="css-05.css" /><script type="text/javascript">function creatTab(){    var tabNode= doc.createElement("table");    var tbdNode = doc.createElement("tboday");    //alert(tbdNode.nodeName);    var trNode= doc.createElement("tr");    var tdNode = doc.createElement("td");    var textNode = doc.createElement("单元格一");    tdNode.appendChild(textNode);    trNode.appendChild(tdNode);    tbdNode.appendChild(trNode);    tabNode.appendChild(tbdNode);    byTag("div")[0].appendChild(tabNode);}function createTab2(){    var tabNode= doc.createElement("table");    //tabNode.id="tabid";    tabNode.setAttribute("id","tabid");    var row = byName("rownum")[0].value;    var col = byName("colnum")[0].value;    for(var x = 1; x<=row;x++)    {        var trNode = tabNode.insertRow();        for (var y= 1;y<=col;y++)        {            var tdNode = trNode.insertCell();               tdNode.innerHTML=x+"..."+y;        }       }    //alert(tdNode.nodeName);    //tdNode.innerHTML="单元格一".fontcolor("red");//表示添加的是html文本 用text标签不会被解析    //tdNode.innerHTML="<input type='button' value='hehe'/>";    byTag("div")[0].appendChild(tabNode);    event.srcElement.disabled=true; }function delrow(){    var tabNode=byId("tabid");    if(tabNode==null)    {        alert("表格不存在");        return;     }    var rownum = byName("delrow")[0].value;    if(rownum>0 &&rownum<=tabNode.rows.length)    tabNode.deleteRow(rownum-1);    else    {        alert("删除的行不存在");    }}function delcol(){    var tabNode=byId("tabid");    if(tabNode==null)    {        alert("表格不存在");        return;     }    var colnum = byName("delcol")[0].value;    if(colnum>0 &&colnum<=tabNode.rows[0].cells.length)    {        for(var x=0;x<tabNode.rows.length;x++)        {            tabNode.rows[x].deleteCell(colnum-1);           }    }    else    {        alert("删除的列不存在");       }}</script></head><body><!--通过页面的按钮可以动态的创建一个表格 --><input type="text" name="rownum" /><br/><input type="text" name="colnum" /><br /> <input type="button" value="创建表格" onclick="creatTab()" /><br/> <input type="text" name="delrow" /> <input type="button" value="删除行" onclick="delrow()" /> <br/> <input type="text" name="delcol" />  <input type="button" value="删除列" onclick="delcol()"/> <br/> <input type="button" value="创建表格2" onclick="createTab2()" /> <div> </div></body>

doctool

// JavaScript Documentvar doc = document;function byId(id){    return doc.getElementById(id);}function byTag(tag){    return doc.getElementsByTagName(tag);}function byName(name){    return doc.getElementsByName(name);}
原创粉丝点击