一道让人为难的题

2020-05-24 分类：算法作者：管理员阅读（593）

我一同事面试回来，给我说了面试官给他出的一道题，只能用一个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) 打赏