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

一道让人为难的题

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

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

示例1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 执行 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 执行 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>`
题解:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!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>

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

赞(2) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
2

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

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

博客简介

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

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线