H5画布画表格

H5画表格
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="#" method="post" >
    <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
           <tbody>
                <tr>
                     <td width="136" align="right" bgcolor="#FFFFFF">单元格宽度：&nbsp;&nbsp;</td>
                     <td colspan="3" bgcolor="#FFFFFF">
                     <input type="text" name="x" id="x" > 
                </tr>

                 <tr>
                      <td width="136" align="right" bgcolor="#FFFFFF">单元格高度：&nbsp;&nbsp;</td>
                      <td colspan="3" bgcolor="#FFFFFF">
                      <input type="text" name="y" id="y" >
                      <span class="STYLE1">*</span>                     </td>
                 </tr>
                 <tr>
                      <td width="112" align="right" bgcolor="#FFFFFF">行数：&nbsp;&nbsp;</td>
                      <td width="239" bgcolor="#FFFFFF">
                      <input type="text" name="row" id="row">
                      <span class="STYLE1"> *</span>                          </td>
                  </tr>
                  <tr>
                       <td width="112" align="right" bgcolor="#FFFFFF">列数：&nbsp;&nbsp;</td>
                       <td width="239" bgcolor="#FFFFFF">
                       <input type="text" name="list" id="list" >
                       <span class="STYLE1"> *</span>                          </td>
                   </tr>
                  <tr>
                        <td height="30" colspan="4" align="center" bgcolor="#FFFFFF" class="top3">
                        <input name="btnSubmit" type="button" value="提  交" onclick="tab()">
                        <input name="btnReset" type="reset" onclick="" value="重  置">                          
                       </td>
                  </tr>
           </tbody>
          </table>
        </form>
<canvas id="myCanvas" width="1000" height="800" style="margin-left:100px;border:1px solid #c3c3c3;">
您的浏览器不支持画布功能！
</canvas>
<script >
var beginX=10;
var beginY=10;
function doTab(w,h,list,row)   //用来画表格的函数
{
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    for(r=1;r<=row;r++)      //控制画多少行
        {
        for(l=1;l<=list;l++)     //控制画多少列
            {
            x=beginX+(r-1)*w;
            y=beginY+(l-1)*h;

            x_zuobiao=x+10;
            y_zuobiao=y+10;
            cxt.rect(x,y,w,h);
            cxt.fillText('('+r+','+l+')',x_zuobiao,y_zuobiao);
            }
        }
    cxt.stroke();

    }

function getParam()                      //获取表单传来的参数并做验证
{
    var x=document.getElementById('x');  //获取横坐标
    var x=x.value;

    var y=document.getElementById('y');  //获取纵坐标的值
    var y=y.value;

    var row=document.getElementById('row');  //获取行数
    var row=row.value;

    var list=document.getElementById('list'); //获取列数
    var list=list.value;

    //数据验证
    if(x=='' || isNaN(x))
        {
        alert('请输入单元格宽度（数字）');
        return false;
        }

    if(y=='' || isNaN(y))
    {
    alert('请输入单元格高度(数字)');
    return false;
    }

    if(row==''|| isNaN(row))
    {
    alert('请输入行数(数字)');
    return false;
    }

    if(list=='' || isNaN(list))
    {
    alert('请输入列数(数字)');
    return false;
    }
    //数据验证

    //数据验证成功返回数组
    var param=new Array();
    param['x']=x;
    param['y']=y;
    param['row']=row;
    param['list']=list;

    return param;
    }

function tab()                          //绘制表格
{
    var param=getParam();
    if(param)
        {
        doTab(param['x'],param['y'],param['row'],param['list']);
        }
    }

</script>

</body>
</html>
通过表单获取参数，用H5的画布功能，可以画出想要规格的表格。每个单元格里是显示该单元格的坐标。
Csw_PHPer
发布了20 篇原创文章 · 获赞 4 · 访问量 3万+
私信关注
猜你喜欢
