我正在为客户制作 HTML 成绩册。我使用 PHP 生成成绩册,然后输出一个 HTML 表,如下例所示。每个<td>
包含一个带有<input>
以便老师输入学生的分数。
这就是我想要实现的目标:如何才能让老师可以使用键盘上的箭头键在成绩册内导航? IE:教师应该能够单击单元格,输入成绩,然后按左/右/上/下箭头键移动到适当的输入并输入下一个成绩。
我在这里看到了很多关于如何使用 javascript 来完成此任务的示例,以突出显示不同的内容<td>
单元格,但我不知道如何让老师用箭头键导航输入。任何建议将不胜感激。
body {
margin: 0;
position: absolute;
top: 105px; left: 0px;
width: 100%;
height: calc(100vh - 105px);
background-color: #FCFCFC;
display: grid;
grid-template-rows: 1fr;
grid-template-areas:
"master"}
.master {
grid-area: master;
overflow-x: scroll;}
table {border-collapse: collapse}
th, td {
background-color: white;
max-width: 110px;
border: 1px solid lightgray;}
th {overflow: hidden;}
thead{
top: 0;
position: sticky;
z-index: 1;}
tr td:nth-child(1),
tr th:nth-child(1){
position: sticky;
left: 0;}
thead th.navigator { /* Top left cell with navigation controls */
padding: 10px;
z-index: 3;}
tr td:first-child, tr td:nth-child(2) { /* First two columns of each row */
white-space: nowrap;
max-width: fit-content !important;}
td input {
border: none;
outline: none;
text-align: center;
max-width: 80%;
font-size: 18px;
padding: 6px 0px;
cursor: cell;}
th select {
outline: none;
-webkit-appearance: none;
padding: 8px 12px;
box-sizing: border-box;
border-radius: 8px;
width: 100%;
border: 1px solid lightgray}
tr:focus-within td:not(.gray) {background-color: #E9DCF9}
tr:focus-within td:not(.gray) input {background-color: #E9DCF9}
.due {
font-size: 11px;
color: darkgray;}
.assign {padding: 20px}
.assign span {
cursor: pointer;
font-size: 15px;
overflow: hidden;
color: #581F98}
.avg {padding: 10px}
.studentInfo {
display: flex;
align-items: center;
margin: 10px 12px 10px 6px;}
.studentInfo img {
width: 25px;
margin-right: 10px;
clip-path: circle();}
.red {background-color: red;}
.gray, .gray input {background-color: #F2F2F2;}
.score {
display: flex;
justify-content: center;
align-items: center;}
<table>
<thead>
<tr>
<th class='navigator' colspan='2' rowspan='4'>
<form method='GET'>
<select name='subID' onchange='this.form.submit()'>
<option value='1' >Reading</option>
<option value='2' >Social Studies</option>
</select>
<select name='week' onchange='this.form.submit()' disabled>
<option value='all'>Entire Quarter</option>
</select>
</form>
</th>
<tr>
<th class='due'><span title='Monday'>10/11</span> to <span title='Wednesday'>10/13</span></th>
<th class='due'><span title='Wednesday'>10/20</span> to <span title='Friday'>10/22</span></th>
<th class='due'><span title='Monday'>10/18</span> to <span title='Friday'>10/22</span></th>
<th class='due'><span title='Wednesday'>10/20</span> to <span title='Friday'>10/22</span></th>
</tr>
<tr>
<th class='assign'>
<span title='Assignment ID: 130' onclick='assignInfo("130");'>???? Quiz</span>
</th>
<th class='assign'>
<span title='Assignment ID: 146' onclick='assignInfo("146");'>???? Homework</span>
</th>
<th class='assign'>
<span title='Assignment ID: 145' onclick='assignInfo("145");'>???? Test</span>
</th>
<th class='assign'>
<span title='Assignment ID: 147' onclick='assignInfo("147");'>✏️ Project</span>
</th>
</tr>
<tr>
<th class='avg gray'><span title='9.111/10'>91%</span></th>
<th class='avg gray'><span title='8.672/10'>87%</span></th>
<th class='avg gray'><span title='4.348/5'>87%</span></th>
<th class='avg gray'><span title='8.007/10'>80%</span></th>
</tr>
</thead>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 11'><img src='../../resources/pics/students/11.jpg'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='11' title='97.5/110'>89%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='11' data-workID='7280' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='11' data-workID='7282' data-curScore='9' value='9'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='11' data-workID='7340' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='11' data-workID='7280' data-curScore='10' value='10'>
</div>
</td>
</tr>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 12'><img src='../../resources/pics/students/12.jpg'></span>
<span>Jane Doe</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='12' title='97.5/110'>69%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='12' data-workID='7250' data-curScore='6' value='6'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='12' data-workID='7211' data-curScore='9' value='9'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='12' data-workID='7110' data-curScore='4' value='4'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='12' data-workID='7233' data-curScore='10' value='10'>
</div>
</td>
</tr>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 13'><img src='../../resources/pics/students/13.jpg'></span>
<span>Sally Martin</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='13' title='97.5/110'>100%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='13' data-workID='6250' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='13' data-workID='6211' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='13' data-workID='7610' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='13' data-workID='7933' data-curScore='10' value='10'>
</div>
</td>
</tr>
</table>
它并不完美,但它应该为您提供一个起点。您必须添加一些错误处理并处理边缘情况。
document.addEventListener( 'keydown', ( event ) => {
const currentInput = document.activeElement;
const currentTd = currentInput.parentNode.parentNode;
const currentTr = currentTd.parentNode;
const index = Array.from(currentTr.children).indexOf(currentTd);
switch (event.key) {
case "ArrowLeft":
// Left pressed
currentTd.previousElementSibling.getElementsByTagName('input')[0].focus();
break;
case "ArrowRight":
// Right pressed
currentTd.nextElementSibling.getElementsByTagName('input')[0].focus();
break;
case "ArrowUp":
// Up pressed
Array.from( currentTr.previousElementSibling.children )[index].getElementsByTagName('input')[0].focus();
break;
case "ArrowDown":
// Down pressed
Array.from( currentTr.nextElementSibling.children )[index].getElementsByTagName('input')[0].focus();
break;
}
} )
body {
margin: 0;
position: absolute;
top: 105px; left: 0px;
width: 100%;
height: calc(100vh - 105px);
background-color: #FCFCFC;
display: grid;
grid-template-rows: 1fr;
grid-template-areas:
"master"}
.master {
grid-area: master;
overflow-x: scroll;}
table {border-collapse: collapse}
th, td {
background-color: white;
max-width: 110px;
border: 1px solid lightgray;}
th {overflow: hidden;}
thead{
top: 0;
position: sticky;
z-index: 1;}
tr td:nth-child(1),
tr th:nth-child(1){
position: sticky;
left: 0;}
thead th.navigator { /* Top left cell with navigation controls */
padding: 10px;
z-index: 3;}
tr td:first-child, tr td:nth-child(2) { /* First two columns of each row */
white-space: nowrap;
max-width: fit-content !important;}
td input {
border: none;
outline: none;
text-align: center;
max-width: 80%;
font-size: 18px;
padding: 6px 0px;
cursor: cell;}
th select {
outline: none;
-webkit-appearance: none;
padding: 8px 12px;
box-sizing: border-box;
border-radius: 8px;
width: 100%;
border: 1px solid lightgray}
tr:focus-within td:not(.gray) {background-color: #E9DCF9}
tr:focus-within td:not(.gray) input {background-color: #E9DCF9}
.due {
font-size: 11px;
color: darkgray;}
.assign {padding: 20px}
.assign span {
cursor: pointer;
font-size: 15px;
overflow: hidden;
color: #581F98}
.avg {padding: 10px}
.studentInfo {
display: flex;
align-items: center;
margin: 10px 12px 10px 6px;}
.studentInfo img {
width: 25px;
margin-right: 10px;
clip-path: circle();}
.red {background-color: red;}
.gray, .gray input {background-color: #F2F2F2;}
.score {
display: flex;
justify-content: center;
align-items: center;}
<table>
<thead>
<tr>
<th class='navigator' colspan='2' rowspan='4'>
<form method='GET'>
<select name='subID' onchange='this.form.submit()'>
<option value='1' >Reading</option>
<option value='2' >Social Studies</option>
</select>
<select name='week' onchange='this.form.submit()' disabled>
<option value='all'>Entire Quarter</option>
</select>
</form>
</th>
<tr>
<th class='due'><span title='Monday'>10/11</span> to <span title='Wednesday'>10/13</span></th>
<th class='due'><span title='Wednesday'>10/20</span> to <span title='Friday'>10/22</span></th>
<th class='due'><span title='Monday'>10/18</span> to <span title='Friday'>10/22</span></th>
<th class='due'><span title='Wednesday'>10/20</span> to <span title='Friday'>10/22</span></th>
</tr>
<tr>
<th class='assign'>
<span title='Assignment ID: 130' onclick='assignInfo("130");'>???? Quiz</span>
</th>
<th class='assign'>
<span title='Assignment ID: 146' onclick='assignInfo("146");'>???? Homework</span>
</th>
<th class='assign'>
<span title='Assignment ID: 145' onclick='assignInfo("145");'>???? Test</span>
</th>
<th class='assign'>
<span title='Assignment ID: 147' onclick='assignInfo("147");'>✏️ Project</span>
</th>
</tr>
<tr>
<th class='avg gray'><span title='9.111/10'>91%</span></th>
<th class='avg gray'><span title='8.672/10'>87%</span></th>
<th class='avg gray'><span title='4.348/5'>87%</span></th>
<th class='avg gray'><span title='8.007/10'>80%</span></th>
</tr>
</thead>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 11'><img src='../../resources/pics/students/11.jpg'></span>
<span>John Doe</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='11' title='97.5/110'>89%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='11' data-workID='7280' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='11' data-workID='7282' data-curScore='9' value='9'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='11' data-workID='7340' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='11' data-workID='7280' data-curScore='10' value='10'>
</div>
</td>
</tr>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 12'><img src='../../resources/pics/students/12.jpg'></span>
<span>Jane Doe</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='12' title='97.5/110'>69%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='12' data-workID='7250' data-curScore='6' value='6'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='12' data-workID='7211' data-curScore='9' value='9'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='12' data-workID='7110' data-curScore='4' value='4'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='12' data-workID='7233' data-curScore='10' value='10'>
</div>
</td>
</tr>
<tr>
<td>
<div class='studentInfo'>
<span title='Student ID: 13'><img src='../../resources/pics/students/13.jpg'></span>
<span>Sally Martin</span>
</div>
</td>
<td class='avg gray'>
<span data-studentAvg='13' title='97.5/110'>100%</span>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='13' data-workID='6250' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='131' data-usid='13' data-workID='6211' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='132' data-usid='13' data-workID='7610' data-curScore='10' value='10'>
</div>
</td>
<td>
<div class='score'>
<input type='text' data-assID='130' data-usid='13' data-workID='7933' data-curScore='10' value='10'>
</div>
</td>
</tr>
</table>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)