关注前端 | 前端博客
当前位置: 算法 > 一道让人为难的题

一道让人为难的题

2020-05-24 分类:算法 作者:管理员 阅读(441)

我一同事面试回来,给我说了面试官给他出的一道题,只能用一个for循环,返回一个列数不定,行数不定的table表格,字符串,直白点就是返回一个字符串,

示例1:

 执行 format(3,10) 返回:

`table>
    <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>
    <tr>
        <td>10</td>
    </tr>
</table>`

示例2:

 执行 format(4,15) 返回:

`table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
    </tr>
</table>`
题解:
<!DOCTYPE html>
<html>
<head>
    <meta content="cahrset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格相关题</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
        }

        table {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
            border-spacing: 0;
        }

        table td {
            word-break: break-all;
            word-wrap: break-word;
        }

        th,
        td {
            height: 50px;
            width: 80px;
            line-height: 50px;
            overflow: hidden;
            text-align: center;
            font-size: 12px;
        }

        th {
            color: #1e304f;
           background-color: #f3f8ff;
       }

        td {
            color: #384967;
       }

        tr {

            border-bottom: 1px solid #eee;
       }

        #txt,
       #num {
           width: 16%;
            line-height: 21px;
            height: 40px;
            padding: 10px 15px;
            -webkit-user-select: text;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: 3px;
            outline: 0;
            background-color: #fff;
           -webkit-appearance: none;
            box-sizing: border-box;
        }

        .form-item {
            display: flex;
            align-items: center;
            padding: 10px;
        }

        #btn,
       #numBtn {
           flex: 1;
            font-size: 14px;
            font-weight: 400;
            line-height: 26px;
            position: relative;
            display: inline-block;
            margin-bottom: 0;
            padding: 6px 12px;
            cursor: pointer;
            -webkit-transition: all;
            transition: all;
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
            -webkit-transition-duration: .2s;
            transition-duration: .2s;
            text-align: center;
            vertical-align: top;
            white-space: nowrap;
            color: #333;
           border: 1px solid #ccc;
           border-radius: 3px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            background-color: #fff;
           background-clip: padding-box;
            margin-left: 10px;
        }

        .container {
            height: calc(100vh - 60px);
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="form-item">列数设置: <input type="number" id="txt">数据量设置: <input type="number" id="num"> <input type="button" id="btn" value="确定"> </div>
    <div class="container"></div>
</body>
<script>
    function format(num, column) {
        let html = ''
        let cope = Math.ceil(num / column)
        let copeArr = [...Array(cope).keys()].map(i => i + 1)
        for (let i = 0; i < num; i++) {
            if (i % column == 0) {
                var htl = `<td>${i + 1}</td>`
            } else {
                htl += `<td>${i + 1}</td>`
            }
            if (copeArr.includes((i + 1) / column) || i == num - 1) {
                html += `<tr>${htl}</tr>`
            }
        }
        return `<table>${html}</table>`
    }
    let ipt = document.querySelector('#txt')
    let num = document.querySelector('#num')
    let container = document.querySelector('.container')
    num.value = 50 //默认 50条数据
    ipt.value = 3  //默认3列
    document.querySelector('#btn').addEventListener('click', function () {
        container.innerHTML = ''
        container.insertAdjacentHTML('beforeend', format(num.value * 1, ipt.value * 1))
    })
</script>
</html>

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(3) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
3

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - 一道让人为难的题

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线