html 表格table

来源：互联网发布：淘宝网店买卖编辑：程序博客网时间：2024/05/17 05:53

利用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>

//csskeyboard_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);    });});

0 0