我一同事面试回来,给我说了面试官给他出的一道题,只能用一个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
>
「三年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - 一道让人为难的题