（Javascript）帮助我使这个表工作 [英] (Javascript) Help me make this table work
本文介绍了（Javascript）帮助我使这个表工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我写了html&我的桌子的CSS：
我的桌子
了解：链接.png
14 cols x 12行（第13行：仅使用第1个单元格）
thead 1行
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） - 忽略空白单元格
非常感谢你！
HTML
I wrote html & css for my table:
My table
To understand: Link .png
14 cols x 12 rows (13th row: use the 1st cell only)
thead 1 row
tbody
- 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.0
1. 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.0
Note: 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 cells
Thank 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$ b
CSS
* {
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;
}
Javascript
Javascript
subjectsArray = ["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）帮助我使这个表工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![我的桌子](\"http://i.stack.imgur.com/VG9oM.png\"){kind=link}
![链接.png](\"http://i.stack.imgur.com/xQKiu.png\"){kind=link}