zoukankan      html  css  js  c++  java
  • 创建表格的方法

    1.字符串的的拼接

    function createTable (rows,cols){
    var html = "<table>";
    for(var i = 0;i<rows;i++){
    html+="<tr>";
    for(var j = 0;j<cols;j++){
    html+="<td style = 'border:1px solid red; padding:5px 30px;'>"+rows+"行"+cols+"列"+"</td>"
    }
    html+="</tr>"
    }

    html += "<table>";
    oDiv.innerHTML = html;

    2.创建追加节点

    function createTable (rows,cols){
    var fragment=document.createDocumentFragment();//创建文档碎片
    var cTable = document.createElement("table");
    for(var i = 0;i<rows;i++){
    var cTr = document.createElement("tr");
    for(var j = 0;j<cols;j++){
    var cTd = document.createElement("td");
    cTd.style.cssText = "padding: 5px 30px; border: 1px solid red;";
    cTd.innerHTML = "111111";
    cTr.appendChild(cTd);
    }
    cTable.appendChild(cTr);
    }
    fragment.appendChild(cTable);
    oDiv.appendChild(fragment);

    }

    3.

    <table border="1">

    </table>

    var oTable=document.getElementsByTagName('table')[0];
    //alert(oTable.rows.length);//获取行
    //alert(oTable.rows[0].cells.length);
    //insertRow(index); //insertRow() 方法用于在表格中的指定位置(index)插入一个新行。
    //insertCell(index);//方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。
    //deleteRow(); 方法用于从表格删除指定位置的行。
    //deleteCell();
    var oTr=null;
    var oTd=null;
    for(var i=0;i<10;i++){
    oTr=oTable.insertRow(i);//i:第几行
    for(var j=0;j<10;j++){
    oTd=oTr.insertCell(j);
    oTd.innerHTML='1111111111'+j;
    }
    }

  • 相关阅读:
    react-native 点击按钮进行交互
    常用类
    js里面 undefined 和 null
    ajax 提交数据
    通过Unicode判断一个字符是不是汉字
    git commit 后的对话框
    vue-cli 使用less的方法
    node创建服务器简单测试接口
    bootstrap3 模态框js的控制
    鱼眼镜头的坐标变换
  • 原文地址:https://www.cnblogs.com/sun765/p/7772869.html
Copyright © 2011-2022 走看看