html 表格table

利用table写一个键盘

键盘上方有一个输入框，点击对应数字，输入框上显示改数字

table可以直接设置<tr> 的行高 列宽

//html
<div class="keyboard_1">
    <table class="left_1">
        <tr>
           <td><button value="1">1</button></td>
           <td><button value="2">2</button></td>
           <td><button value="3">3</button></td>
        </tr>
        <tr>
           <td><button value="4">4</button></td>
           <td><button value="5">5</button></td>
           <td><button value="6">6</button></td>
        </tr>
        <tr>
           <td><button value="7">7</button></td>
           <td><button value="8">8</button></td>
           <td><button value="9">9</button></td>
        </tr>
        <tr>
           <td><button value=".">.</button></td>
           <td><button value="0">0</button></td>
           <td><button value=""><img src="image/5.png" width="60px"></button></td>
        </tr>
    </table>

    <table class="right_1">
        <tr id="delete">
            <td><button><img src="image/3.png" width="50px"></button></td>
        </tr>
        <tr class="balck_button">
            <td><button>确认</button></td>
        </tr>
    </table>

</div>

//css
keyboard_1{
    font-size: 60px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    width:100%;

}

.keyboard_1 td{
    height: 100px;
    width: 33.33%;
}
.keyboard_1 .left_1{
    width: 80%;
    float: left;
}

.left_1 table{
    width: 100%;

}


.keyboard_1 button{
    background-color: #f6f6f7;
    width: 100%;
    height: 100%;
    border:solid #e0e0e0 1px;

}

.keyboard_1 .right_1{
    width: 20%;
    float: right;
}
.right_1 td{
    height: 200px;
    font-size: 20px;
}

.balck_button button{
    background-color: #000;
    color: #fff;
}

//js
$(document).ready(function () {

    var $num="";
    $(".keyboard_1 .left_1 button").click(function(){
        //alert(this.value);
        $num += this.value;
        $("#price input").attr("value",$num);
    });

    $("#delete button").click(function(){
        //alert(1);

        $num = $("#price input").attr("value");

        //alert($num);
        $num = $num.substr(0,$num.length-1);
        //alert($num);
        $("#price input").attr("value",$num);

    });

});