javascrip操作表格元素

最新推荐文章于 2024-09-01 13:33:34 发布

damon-lin

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量1k

点赞数

分类专栏： javascrip 文章标签： javascript 表格

本文链接：https://blog.csdn.net/linsheng9731/article/details/24119391

版权

javascrip 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

网页当中为了直观有序的显示数据一般用表格组织数据。

下面给出javascrip操作表格的代码：

<html>
<head>
<title>遍历表格</title>
   <style type="text/css">
       body,table,th,td,{font-size: 15px}
       #tablescore{border-collapse: collapse;}
       #tablescore th{padding: 10px;}
       #tablescore td{padding: 10px;}

    </style>
</head>
<script type="text/javascript">
    function disscore()
    {
       var tab=document.getElementById("tablescore")
        var rows=tab.rows
        for(var i=1;i<rows.length;i++)
        {
            var name=rows[i].cells[0].innerHTML;
            var java=rows[i].cells[1].innerHTML;
            var html=rows[i].cells[2].innerHTML;
            var total=rows[i].cells[3].innerHTML;
            alert(name+":"+java+","+html+","+total)

        }

    }
    function addscores()
    {
        var name=document.getElementById("name").value
        var java=document.getElementById("java").value
        var html=document.getElementById("html").value
        var total=document.getElementById("total").value
        if(name==""||java==""||html==""||total=="")
        {
            alert("内容不能为空！")
            return;
        }
        var tab=document.getElementById("tablescore")
        var row=tab.insertRow(-1)//添加一行 空白
        var temp=row.insertCell(-1)//添加一个单元格 空白
        temp.style.textAlign="center"
        temp.innerText=name

        temp=row.insertCell(-1)//添加一个单元格 空白
        temp.style.textAlign="center"
        temp.innerText=java

        temp=row.insertCell(-1)//添加一个单元格 空白
        temp.style.textAlign="center"
        temp.innerText=html

        temp=row.insertCell(-1)//添加一个单元格 空白
        temp.style.textAlign="center"
        temp.innerText=total

    }

    function deletescore()
    {
        var tab=document.getElementById("tablescore")
    var cnt=tab.rows.length;
    if(cnt>1)
        tab.deleteRow(cnt-1)
    else
        alert("没有内容可以删除了！")
    }
</script>

<body>
name:<input type="text"id="name" size="10"/>   
java:<input type="text" id="java" size="3"/>  
html:<input type="text" id="html" size="3"/>  
total:<input type="text" id="total" size="3/">  
<input type="button"  value="add" οnclick="addscores()">
<input type="button" value="delete" οnclick="deletescore()">
<br>
<br>
<table id="tablescore" width="650" border="1" bordercolor="#003399" align="left">
<tr bgcolor="#0099ff">
    <th>name</th> <th>java</th>  <th>html</th>  <th>total</th>
</tr>

<tr>
    <td align="center">jack</td>
    <td align="center">98</td>
    <td align="center">88</td>
    <td align="center">68</td>
</tr>

<tr>
    <td align="center">marry</td>
    <td align="center">77</td>
    <td align="center">68</td>
    <td align="center">80</td>
</tr>
</table>

</body>
</html>