HTML中报表动态性加上

空话很少说了,立即给大伙儿贴编码了,实际编码以下所示:

<html>  
    <head><title>Table</title></head>  
    <body>  
        <table border="1">  
            <thead>  
                <tr>  
                    <td>First Name</td>  
                    <td>Last Name</td>  
                    <td> </td>  
                </tr>  
            <thead>  
            <tbody id="tb">  
                <tr id="1st">  
                    <td>张</td>  
                    <td>3</td>  
                    <td><input type="button" value="Add" onclick="add()">   
                    <input type="button" value="Del" onclick="del(this)"></td>  
                </tr>  
            </tbody>  
        </table>  
    </body>  
</html>  
<script>  
    function add() {  
        var trObj = document.createElement("tr");  
        trObj.id = new Date().getTime();  
        trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'> <input type='button' value='Del' onclick='del(this)'></td>";  
        document.getElementById("tb").appendChild(trObj);  
    }  
    function del(obj) {  
        var trId = obj.parentNode.parentNode.id;  
        var trObj = document.getElementById(trId);  
        document.getElementById("tb").removeChild(trObj);  
    }  
</script>   

      上面的编码中,最先在body中结构了1个table,以便便捷后续的实际操作,大家给table加上了thead 和 tbody 标识,thead标识标识的是报表头,tbody标识标识的是报表行为主体。

      示例中的报表,共有3列,第1列 first name,第2列 last name,第3列为实际操作列。

      实际操作列中,包括两个实际操作,1个是给报表加上行,1个是删掉当今行。加上行和删掉行的实际操作各自绑在两个按钮上,点一下按钮时,开启相应的加上行/ 删掉行 实际操作。

加上行方式

function add() {  
        var trObj = document.createElement("tr");  
        trObj.id = new Date().getTime();  
        trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'> <input type='button' value='Del' onclick='del(this)'></td>";  
        document.getElementById("tb").appendChild(trObj);  
    }  

第1行,建立tr元素,即建立1个报表行。

第2行,trObj.id = new Date().getTime(); 给转业加上id 特性,并给特性取值,取当今系统软件的毫秒数,这个关键是删掉的情况下必须。

第3行,trObj.innerHTML = "<td><input name='firstName'/></td><td><input name='lastName'/></td><td><input type='button' value='Add' onclick='add()'>

<input type='button' value='Del' onclick='del(this)'></td>"; 给报表行取值,根据innerHTMML特性,设定<tr>标识和</tr> 标识间的html编码內容,也便是要加上的行內容。

第4行,document.getElementById("tb").appendChild(trObj); 将建立好的报表行加上到报表行为主体中。

删掉行方式

function del(obj) {  
    var trId = obj.parentNode.parentNode.id;  
    var trObj = document.getElementById(trId);  
    document.getElementById("tb").removeChild(trObj);  
}

删掉方式中传送了1个主要参数,在加上行方式中,大家能够看到删掉方式del 中传送了this主要参数,网页页面编码中的this指代的是当今的HTML元素,即this所属的<input >域。

第1行,var trId = obj.parentNode.parentNode.id; 获得当今元素的父连接点的父连接点的id,即要删掉的行的id 。

第2行,var trObj = document.getElementById(trId); 获得要删掉的行元素。

第3行,document.getElementById("tb").removeChild(trObj); 在报表行为主体中删掉该行。

缺陷

上面的编码基础完成了动态性给报表提升行和删掉行的作用,可是编码也有缺陷,关键有这么两点:

1  报表在提升行前和提升行后,报表宽度产生转变

提升行前

提升行后

提升行后,报表列变宽了

2  访问器默认设置开启的网页页面汉语出現错码

必须 设定标识符编号改动网页页面编号文件格式后才可以一切正常显示信息