tbody - x1：5行（价值* 1） - x2：4行（值* 2） - x3：1行（值* 3） - 平均：1排 - 在平均下：1格（平均） ---------- 我需要你的帮助，使它可以做以下事情： **我。选择单元格** 1.标签 - 在活动单元格（1a）Tab中选择下一个右侧单元格（1b ） - 如果那是行的最后一个单元格（1c）Tab移动到（1d）下行的第一个单元格 - 如果是tbody中最后一行/ col的最后一个单元格：什么都不做 - Shift + Tab：相反方向（左） 2。输入 - 在激活的单元格中，Enter移动到下面的单元格 - 如果这是col的最后一个单元格（2a）Enter要移动到下一个右边col（2b）的第一个单元格 - 如果那是tbody中最后一行/ col的最后一个单元格：什么都不做 - Shift + Enter ：反方向（向上） 3.←→↑↓ （3a）移动到左/右或上方的单元格/（3a）（3b） ** II。输入** - 可以输入cols a-> m中的单元格以及x1，x2，x3（tbody td）行中的单元格 - 仅限数字（0.0到10.0） - 最大长度：3个字符（包括。和2个单个数字）或10.0 1.快速更换： 点击一个单元格有数字1（1a）然后输入数字2，单元格更改值并显示为number2（1b） 2.更改格式:(类型后） - 类型2号码 - >自动添加。之间选择下面的单元格（如I.2.Enter）。 例如： - 9.9 in（2a） - 至得到结果如（2b）我们只需要输入：109580或10958 *输入* - 要输入8.0，我们可以输入：8 *输入*或8. *输入*或80或8.0 注意：5行x1中的每个单元格只能有1个数字（如10或9或1）然后自动移动到下面的单元格 ** III。计算** 不要在平均单元格中显示任何内容（例如0.0，NaN，......） - 平均行中的每个单元格必须计算并显示所有单元格的平均值，具有上面的值，在同一列（1a）中 示例：在col a中，平均= **（（10 + 9）* 1 +（10 + 9）* 2 +（0）* 3）/（2 * 1 + 2 * 2 + 1 * 3）= 3.3 ** - 平均下的单元格是平均结果的平均值，它只是/平均行中的总单元格数有值（1b） - 忽略空白单元格 非常感谢你！ HTMLI wrote html & css for my table:My tableTo understand: Link .png14 cols x 12 rows (13th row: use the 1st cell only)thead 1 rowtbody- x1: 5 rows (value *1)- x2: 4 rows (value *2)- x3: 1 row (value *3)- Average: 1 row- Under "Average": 1 cell (Average)----------And I need your helps to make it can do these following things:**I. Select cell**1. Tab- In a actived cell (1a) "Tab" to choose the next right cell (1b)- If that is the last cell of a row (1c) "Tab" to move to the first cell of the row under (1d)- If that is the last cell of the last row/col in tbody: do nothing- Shift+Tab: opposite direction (left)2. Enter- In a actived cell, "Enter" to move to the cell below- If that is the last cell of a col (2a) "Enter" to move to the first cell of the next right col (2b)- If that is the last cell of the last row/col in tbody: do nothing- Shift+Enter: opposite direction (up)3. ← → ↑ ↓(3a) Move to the cell on the left/right or above/below (3a) (3b)**II. Type**- Can type in cells in cols a->m and in rows of x1, x2, x3 (tbody td)- Numbers only (0.0 to 10.0)- Max lenght: 3 character (include "." and 2 single numbers) or 10.01. Quick replace:Click to a cell has number1 (1a) then type a number2, cell change value and display to number2 (1b)2. Change format: (After type)- Type 2 number -> auto add "." between then select the cell under (like I.2.Enter).Example:- 9.9 in (2a)- To get the result like (2b) we just need to type: 109580 or 10958 *enter*- To type 8.0 we can type: 8 *enter* or 8. *enter* or 80 or 8.0Note: Each cell in 5 rows of x1 only can has 1 number (like 10 or 9 or 1) then auto move to the cell below**III. Calculate**Do not show anything in Average cells (such as 0.0, NaN,… )- Each cell in Average row have to calculate and display the average value of all cells have value above, in the same col (1a)Example: in col a, average = **( (10+9)*1 + (10+9)*2 + (0)*3 ) / ( 2*1 + 2*2 + 1*3) = 3.3**- Cell under "Average" is "Average of average results", it just / number of total cells in Average row has value (1b) - ignore blank cellsThank you so much!HTML<head><meta charset="UTF-16" /><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css"></link></head><body><table> <thead> <tr> <th></th> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>g</td> <td>h</td> <td>i</td> <td>j</td> <td>k</td> <td>l</td> <td>m</td> </tr> </thead> <tbody class="tb" align="right"> <tr id="x1"> <th rowspan="5">x1</th> <td data-subject="Math" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="Physics" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="Chemistry" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="Biology" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="Literature" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="History" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="Geographic" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="English" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="CE" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="Infomatics" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="IT" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="PE" data-type="1" data-id="1" contenteditable="true"></td> <td data-subject="ME" data-type="1" data-id="1" contenteditable="true"></td> </tr> <tr> <td data-subject="Math" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="Physics" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="Chemistry" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="Biology" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="Literature" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="History" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="Geographic" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="English" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="CE" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="Infomatics" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="IT" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="PE" data-type="1" data-id="2" contenteditable="true"></td> <td data-subject="ME" data-type="1" data-id="2" contenteditable="true"></td> </tr> <tr> <td data-subject="Math" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="Physics" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="Chemistry" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="Biology" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="Literature" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="History" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="Geographic" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="English" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="CE" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="Infomatics" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="IT" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="PE" data-type="1" data-id="3" contenteditable="true"></td> <td data-subject="ME" data-type="1" data-id="3" contenteditable="true"></td> </tr> <tr> <td data-subject="Math" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="Physics" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="Chemistry" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="Biology" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="Literature" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="History" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="Geographic" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="English" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="CE" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="Infomatics" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="IT" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="PE" data-type="1" data-id="4" contenteditable="true"></td> <td data-subject="ME" data-type="1" data-id="4" contenteditable="true"></td> </tr> <tr> <td data-subject="Math" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="Physics" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="Chemistry" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="Biology" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="Literature" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="History" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="Geographic" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="English" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="CE" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="Infomatics" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="IT" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="PE" data-type="1" data-id="5" contenteditable="true"></td> <td data-subject="ME" data-type="1" data-id="5" contenteditable="true"></td> </tr> <tr id="x2"> <th rowspan="4">x2</th> <td data-subject="Math" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="Physics" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="Chemistry" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="Biology" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="Literature" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="History" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="Geographic" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="English" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="CE" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="Infomatics" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="IT" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="PE" data-type="2" data-id="6" contenteditable="true"></td> <td data-subject="ME" data-type="2" data-id="6" contenteditable="true"></td> </tr> <tr> <td data-subject="Math" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="Physics" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="Chemistry" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="Biology" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="Literature" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="History" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="Geographic" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="English" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="CE" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="Infomatics" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="IT" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="PE" data-type="2" data-id="7" contenteditable="true"></td> <td data-subject="ME" data-type="2" data-id="7" contenteditable="true"></td> </tr> <tr> <td data-subject="Math" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="Physics" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="Chemistry" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="Biology" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="Literature" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="History" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="Geographic" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="English" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="CE" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="Infomatics" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="IT" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="PE" data-type="2" data-id="8" contenteditable="true"></td> <td data-subject="ME" data-type="2" data-id="8" contenteditable="true"></td> </tr> <tr> <td data-subject="Math" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="Physics" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="Chemistry" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="Biology" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="Literature" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="History" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="Geographic" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="English" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="CE" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="Infomatics" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="IT" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="PE" data-type="2" data-id="9" contenteditable="true"></td> <td data-subject="ME" data-type="2" data-id="9" contenteditable="true"></td> </tr> <tr id="x3"> <th>x3</th> <td data-subject="Math" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="Physics" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="Chemistry" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="Biology" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="Literature" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="History" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="Geographic" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="English" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="CE" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="Infomatics" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="IT" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="PE" data-type="3" data-id="10" contenteditable="true"></td> <td data-subject="ME" data-type="3" data-id="10" contenteditable="true"></td> </tr> </tbody> <tfoot> <tr class="avr"> <th>Average</th> <td class="average" data-average-subject="Math"></td> <td class="average" data-average-subject="Physics"></td> <td class="average" data-average-subject="Chemistry"></td> <td class="average" data-average-subject="Biology"></td> <td class="average" data-average-subject="Literature"></td> <td class="average" data-average-subject="History"></td> <td class="average" data-average-subject="Geographic"></td> <td class="average" data-average-subject="English"></td> <td class="average" data-average-subject="CE"></td> <td class="average" data-average-subject="Infomatics"></td> <td class="average" data-average-subject="IT"></td> <td class="average" data-average-subject="PE"></td> <td class="average" data-average-subject="ME"></td> </tr> <tr> <th class="apt"></th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tfoot> </table></body> CSS $b$ bCSS* {font-family: "Open Sans", sans-serif;font-weight: 300;outline: 0;}html, body {padding: 0;margin: 0;}html {background: #fff;min-width: 1170px;}body {min-width: 1300px;}table {width: 85%;margin: 100px auto;border-collapse: collapse;z-index: 0;overflow: hidden;text-align:center;font-size: 16px;cursor: default;user-select: none;}thead th, thead td, tfoot th {background: rgba(57,192,177,1);color: #fff;font-size: 17px;box-sizing: border-box;}thead td {cursor: s-resize;}tr {height: 40px;transition-duration: 0.2s;}table td {width: 7.2%;max-width: 7.2%;}table td br {display: none}th {width: 6.4%;}td, th { position: relative;max-width: 7.2vw;}#x1 th, #x2 th, #x3 th {background-color: #fff;cursor: none;pointer-events: none;border-right: 1px dotted #ddd;box-sizing: border-box;}tfoot tr:first-child th {border-right: 1px solid rgba(57,192,177,1);}tbody tr th {text-align: center;}tbody td { padding-right: 10px; padding-left: 10px;border-right: 1px dotted #ddd;/*border-color: #ddd;*/user-select: text;-webkit-touch-callout: text;-webkit-user-select: text;-khtml-user-select: text;-moz-user-select: text;-ms-user-select: text;}tbody td:focus {cursor: text}tbody td:last-child {border-right:none}tbody td, tfoot td {transition-duration: 0.2s;text-align: right;padding-right: 10px;}#x2, #x3 {border-top: 1px solid rgba(57,192,177,1);}tfoot th {font-size: 17px;}tfoot tr {background: rgb(235, 249, 247);cursor: default;}tfoot tr:last-child td {background: #fff;pointer-events: none;}.apt {color: #000;font-size: 20px;padding-top: 2px;text-shadow: 1px 1px 3px #aaa;background: #fff;border-bottom: 1px solid rgb(57,192,177);border-right: 0;}tbody:hover td {border-color: #ddd;}tbody tr td:hover, tbody td:focus {background-color: #eee;} JavascriptJavascriptsubjectsArray = ["Math", "Physics", "Chemistry", "Literature", "History", "Geographic", "English", "CE", "Infomatics", "IT", "PE", "ME", "Biology"]; deniedKeyCodes = [106, 107, 109, 110, 111, 186, 187, 189, 191, 192, 219, 220, 221, 222, 188, 190, 191]; markCount = 0; markTypeCount = 10; $('document').ready(function () { $('td').keyup(function (event) { if (event.which == 13 || ($(this).html().length == 2 && event.which != 10)) { moveToNextCell($(this)); } calculateAverageMark(); }).keydown(function (event) { return validateKey(event.which) && (this.val() == "10" || this.html().indexOf("<br>") != -1); }); });function validateKey(keyId) { return !((keyId >= 65 && keyId <= 90) || deniedKeyCodes.indexOf(keyId) != -1); } function changeFormat(text) { return (text != "10" ? text.split('')[0] + "." + text.split('')[1] : text);} function changeMarkFormat(obj) { var mark = obj.html(); if (mark.length == 2) obj.html(changeFormat(mark)); } function moveToNextCell(obj) { changeMarkFormat(obj); var type = obj.attr('data-subject') , index = parseInt(obj.attr('data-id')); if (index > 0 && index < markTypeCount) $("td[data-subject='" + type + "'][data-id='" + (index + 1) + "']").focus(); } function calculateAverageMark() { var totalAllMark = 0.0; var totalMarkCount = 0; $.each(subjectsArray, function () { var totalMark = markCount = 0; var markArr = getMarkArray(this); totalMark += calculateSumArray(markArr); updateAverageMark(this, parseFloat(totalMark / markCount).toFixed(1)); totalAllMark += totalMark; totalMarkCount += markCount; }); $('.apt').html((parseFloat(totalAllMark) / totalMarkCount).toFixed(1)); } function calculateSumArray(array, value) { var res = 0; $.each(array, function () { res += isNaN(this) ? 0 : this ; if (!isNaN(this)) markCount++; }); return res; } function getMarkArray(subject) { var res = []; $("[data-subject='" + subject + "']").each(function () { var markTxt = $(this).html(); var base = parseInt($(this).attr("data-type")); markTxt.split(" ").forEach(function (element, index, array) { //res.push(parseInt(element * base)); for (var i = 1; i <= base; ++i) res.push(parseInt(element)); }); }); return res; } function updateAverageMark(subject, value) { $('.average[data-average-subject="' + subject + '"]').html(value); }推荐答案('document').ready(function () {('document').ready(function () {('td').keyup(function (event) { if (event.which == 13 || (('td').keyup(function (event) { if (event.which == 13 || ((this).html().length == 2 && event.which != 10)) { moveToNextCell((this).html().length == 2 && event.which != 10)) { moveToNextCell( 这篇关于（Javascript）帮助我使这个表工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
