zoukankan      html  css  js  c++  java
  • 用js操作table、tr、td 「字体样式及TD背景图片」

    function messageSort() {  --函数名
    var message=document.getElementById("message").value; --添加的内容(下面有对应的html)
    if(name == "" ) return; --如果添加为空,返回
    var row = document.createElement("tr"); //创建tr的
    row.setAttribute("id", name); --设置row的属性. 
    var cell = document.createElement("td");//创建td
    cell.appendChild(document.createTextNode(name));//td里注入文本
    row.appendChild(cell);//将TD注入TR

    var deleteButton = document.createElement("input"); //这部分是添加删除button按钮
    deleteButton.setAttribute("type", "button");
    deleteButton.setAttribute("value", "删除");
    deleteButton.onclick = function () { deleteSort(name); };
    cell = document.createElement("td"); 
    cell.appendChild(deleteButton);//注入按钮
    row.appendChild(cell);//将TD注入TR
    document.getElementById("sortList").appendChild(row);//将TR注入到相应地方(sortList可以看下面html)
    var cell5 = document.createElement("td");

    cell.style.background="#ffffff";//背景颜色设置

    row1.style.color="#ffffff"; //字体颜色设置
    cell5.style.display = "none" ;   //ie不支持setAttribute("style", "display:none");

    // <td  style="display:none"  >dd</td> 直接写TD是这样..
    cell5.appendChild(document.createTextNode(zdid));
    row.appendChild(cell5);

    }
    // 删除内容
    function deleteSort(id) {//这个函数为上面的删除button调用的
    var rowToDelete = document.getElementById(id);
    var sortList = document.getElementById("sortList");
    sortList.removeChild(rowToDelete);
    }
    </script>
    </head>
    <body>
    <table border="0" cellspacing="0" width="400" bgcolor="#f5efe7">
    <tr>
        <td height="20">增加内容:</td>
        <td><input id="message" type="text"></td>
        <td><a href="javascript:messageSort();">添加</a></td>
    </tr>
    </table>
    <table border="1" width="400">
    <tr>
        <td height="20" align="center">内容:</td>
        <td>操作</td>
    </tr>
    <tbody id="sortList"></tbody>
    </table>
    </body>

     

    ps:  document.style.backgroundImage="url('http://t1.baidu.com/it/u=1300390954,3399399465&fm=0&gp=0.jpg')"; //改变背景图片  

     $("#demo_table").attr("background","2.jpg");//jquery


    转载自:http://blog.csdn.net/liujs_vb/article/details/6939473

  • 相关阅读:
    如何将程序添加到系统服务实现开机自启动
    ASP.NET速度优化
    layer官方演示与讲解(jQuery弹出层插件)
    SQLSERVER排查CPU占用高的情况
    解决FlexPaper分页分段加载问题(转)
    SQL 2008升级SQL 2008 R2完全教程或者10.00.1600升级10.50.1600
    Virtualbox中win7虚拟机中U盘不可用问题的解决
    解决:对COM 组件的调用返回了错误 HRESULT E_FAIL
    google chrome插件开发,自己动手,丰衣足食
    WebKit.net最简单使用方法
  • 原文地址:https://www.cnblogs.com/fyq891014/p/4188861.html
Copyright © 2011-2022 走看看