自己写的一个网页版简易账本-蒲公英云

        根据毕老师的HTML+CSS+JavaScript教程自己琢磨着写出来的一个简易账本，功能很简单，但每一个字符都是自己敲出来的，清楚他们的功能，还是很有成就感的！先看下概貌吧！

***************************************************************************************************************************

看能不能直接在这里显示出来

-———————————————————————————————————————————————————————————————————————————-

类别	金额	日期	备注
收入支出

序号	类别	金额	日期	备注	结余

***************************************************************************************************************************

显示了但不能用给出代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简易账本</title>
<style type="text/css">
table{
        border: red 2px solid;
        text-align: center;
        border-collapse: collapse;
        width: 600px;
        background: #CCFF99;
    }
table td, table th{
        border: red 1px solid;
    }
table th{
        background: #99CC33;
    }
.one{
        background: #66FFFF;
    }
.two{
        background: #66FF33;
    }
.over{
        background: #FF66FF;
    }
#click{
        background: #FF6600;
    }
</style>
<script type="text/javascript">
var styleName;
onload = function()
{
    var tabNode = document.getElementById("dst");
    var time = new Date();
    //alert(time.getYear()+"-"+(time.getMonth()+1)+"-"+time.getDate());
    var sysTime = time.getYear()+"-"+(time.getMonth()+1)+"-"+time.getDate();
    //alert(sysTime);
    var timeText = document.getElementById("riqi");
    //alert(timeText.innerHTML);
    timeText.value = sysTime;
    //alert(timeText.text);
    var tabRows = tabNode.rows;
    for (var x=1; x<tabRows.length; x++)
    {
        if (x%2==1)
        {
            tabRows[x].className = "one";
        }
        else
            tabRows[x].className = "two";
        loadEvent(tabRows[x]);
        /*tabRows[x].onmouseover = over();
        tabRows[x].onmouseout = out();
        tabRows[x].onclick = click();
        */
    }
}
function loadEvent(node)
{
    node.onmouseover = function()
    {
        styleName = this.className;
        this.className = "over";
    }
    node.onmouseout = function()
    {
        this.className = styleName;
    }
    node.onclick = function()
    {
        if (this.id=="click")
        {
            this.id = "";
        }
        else
            this.id = "click";
    }
}
/*function reload(node)
{
    var tabNode = document.getElementById("dst");
    var tabRows = tabNode.rows;
    for (var x=1; x<tabRows.length; x++)
    {
        if (x%2==1)
        {
            tabRows[x].className = "one";
        }
        else
            tabRows[x].className = "two";
        tabRows[x].onmouseover = over();
        tabRows[x].onmouseout = out();
        tabRows[x].onclick = click();
    }
}*/
function isNotNum(num)
{
    for (var x=0; x<num.length; x++)
    {
        var s = num.charAt(x);
        if (s>=0 && s<=9)
        {
            continue;
        }
        else
            return true;
    }
    return false;
    /*不是这样
    for (var x=0; x<num.length; x++)
    {
        if (num[x]<=0 && num[x]>=9)
        {
            continue;
        }
        else
            return true;
    }
    return false;
    */
}
//dstnum  目标表格序号  刚开始表格只有标题行 所以先将dstnum=0
//定义一个标记 刚开始为false  dstnum=0  开始添加后为TRUE
var flag = false;
function addList()
{
    //var tabNode = document.getElementById("src");
    var shouzhi = document.getElementsByName("shouzhi");
    //alert(shouzhi[0].checked);
    var leibie = shouzhi[0].checked?true:false;    //true为收入 false为支出
    //alert(leibie);
    var money = document.getElementsByName("money")[0].value;
    //alert(money);
    if (money=="")
    {
        alert("请输入金额！");
        return;
    }
    else if (isNotNum(money))
    {
        alert(isNotNum(money)+"你输入的"+money+"不正确");
        return;
    }
    else
        money = parseInt(money);
    var riqi = document.getElementById("riqi").value;
    //alert(riqi);
    var note = document.getElementById("note").value;
    //alert(note);
    /*----------------获取信息完毕 开始增加-------------------*/
    var tabNode = document.getElementById("dst");
    var tabRows = tabNode.rows;
    //var size = tabRows.length-1;
    //alert(tabRows.length);
    var cols = tabRows[tabRows.length-1].cells;
    var dstnum, jieyu;
    if (!flag)
    {
        dstnum = 0;
        jieyu = money;
        flag = true;
    }
    else
    {
        dstnum = parseInt(cols[0].innerText);
        var srcJieyu = parseInt(cols[cols.length-1].innerText);
        jieyu = leibie?srcJieyu+money:srcJieyu-money;
    }
    //alert(dstnum);
    var dstlei = leibie?"收入":"支出";
    //alert(jieyu);
    //var newNode = document.createElement("tr");
    //alert(newNode.nodeName);
    var newNode = tabNode.insertRow(tabRows.length);
    for (var x=0; x<cols.length; x++)
    {
        //alert(x);
        newNode.insertCell();
    }
    if (dstnum%2==1)
        //tabRows[tabRows.length-1].childNodes[0].className = "two";
        newNode.className = "one";    
    else
        newNode.className = "two";
    loadEvent(newNode);
    //alert(newNode.cells[0].innerText+"::"+tabRows[tabRows.length-1].className+"::"+newNode.className);
    //newNode.height = 99;
    /*这些事件加不上吗？
    newNode.onmouseover = over();
    newNode.onmouseout = out();
    newNode.onclick = click();
    */
    var newcols = newNode.cells;
    //alert(newcols.length);
    newcols[0].innerText = dstnum+1;
    newcols[1].innerText = dstlei;
    newcols[2].innerText = money;
    newcols[3].innerText = riqi;
    newcols[4].innerText = note;
    newcols[5].innerText = jieyu;
    /*内容还真难加 怎么弄呢
    //var newNode = tabRows[tabRows.length];
    //newNode.innerHTML = "'<td>'+'(dstnum+1)'+'</td><td>'+'dstlei'+'</td><td>'+'money'+'</td><td>'+'riqi'+'</td><td>'+'note'+'</td><td>'+'jieyu'+'</td>'";
    //(newNode.cells)[0].innerText = 55;
    //cols[0].innerText = 999;
    alert(newNode.nodeName);
    newNode.height = 99;
    //newNode.innerText = "点击斤斤计较斤斤计较斤斤计较斤斤计较斤斤计较经济";
    newNode.innerHTML = "<td>的的点对点的的的点对点的</td>";
    */
}
</script>
</head>
<body>
<!--简易账本-->
<table id="src">
    <tr>
        <th>类别</th>
        <th>金额</th>
        <th>日期</th>
        <th>备注</th>
        <td rowspan=2><input type="button" value="添加记录" οnclick="addList()" /></td>
    </tr>
    <tr>
        <td><input type="radio" name="shouzhi" value="shouru" checked="checked" />收入<br/>
            <input type="radio" name="shouzhi" value="zhichu" />支出
        </td>
        <td><input type="text" name="money" size="15" /></td>
        <td><input type="text" id="riqi" size="15" /></td>
        <td><textarea id="note" size="15"></textarea><!--input type="text" name="note" /--></td>
    </tr>
</table>
<hr />
<table id="dst">
    <tr>
        <th>序号</th>
        <th>类别</th>
        <th>金额</th>
        <th>日期</th>
        <th>备注</th>
        <th>结余</th>
</table>    
</body>
</html>