前端js小练习，动态生成乘法表

最新推荐文章于 2021-10-07 21:07:19 发布

j_d_m_y

最新推荐文章于 2021-10-07 21:07:19 发布

阅读量734

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/j_d_m_y/article/details/76852135

版权

输入数字，生成对应乘法表，表格线也有要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
/*        .body{width: 10px;height: 10px;}*/
/*        #bo{width: 10px;height: 10px;}*/
    </style>
</head>
<body id="bo">
    <div>
    N=
        <input type="text" id="txt1" >
        <input type="button" value="button" onclick="btn1_click()" >
        <table  id="tb" style="border-collapse: collapse"  border="0">
        <tbody>

        </tbody>
<!--
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
-->
        </table>
    </div>
<!--
    <span style="background: red">
        AAA
    </span>
    <input type="checkbox" name="a" id="chk1">
    <input type="radio" name="a" id="r1">
    <input type="radio" name="a" id="r2">
    <input type="radio" name="a" id="r3">
    <input type="radio" name="a" id="r4">
    <select name="b" id="s1">
        <option value="A">ads</option>
        <option value="B">asd</option>
        <option value="C">ads</option>
    </select>
-->
</body>
<script>
//    window.onload=function(){alert("hello")}  
    function btn1_click(){
//        alert("he")
        var a=document.getElementById("txt1").value;
        var f=isNaN(a);
        if(!f){
//            window.open("https://www.baidu.com")
            var tb=document.getElementById("tb");
            tb.innerHTML=""
             var trt=document.createElement("tr");
            for(var i=0;i<=parseInt(a);i++){
//                tb.innerHTML+="<tr>";
                var trt=document.createElement("tr");
                tb.appendChild(trt);
                if(i==0)trt.setAttribute("style","border-bottom: 1px solid #000")
//                trt.style.border="1px solid #000";
//                trt.border='0';
                for(var j=0;j<=parseInt(a);j++){
//                    tb.innerHTML+="<td>"+i*j+"</td>"
                    var tdt=document.createElement("td");
                    trt.appendChild(tdt);
                    tdt.width="50"
                    if(j==0){tdt.setAttribute("style","border-right: 1px solid #000");tdt.innerHTML=i;continue;}
                    if(i==0){tdt.innerHTML=j;continue;}
                    tdt.innerHTML=i*j;
                }
//                tb.innerHTML+="</tr>";
            }
        }
    }
</script>
</html>

j_d_m_y

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端js小练习，动态生成乘法表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> <style>/* .body{width: 10px;height: 10px;}*/
复制链接

扫一扫