一道让人为难的题

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) 打赏