如何使部分不可编辑的表格单元格与内联JavaScript函数兼容？ [英] How to make a partially un-editable table cell compatible with inline JavaScript functions?
问题描述
因此，几天前，
这是我的代码：
< head> < style>表{边框：1像素纯黑色；边界崩溃：崩溃；字体家族：Arial，无衬线；边距：5px;宽度：100％; } th，td {边框：1px纯黑色；边界崩溃：崩溃；字体家族：Arial，无衬线；边距：5px;填充：5px； }< / style> < / head>< body> < table> < tr> < header1< / th> < header2< / th < / tr> < tr> < td> entry1< / td> < td id = entry1 oninput = myFunction（）> 4000< / td> < / tr> < tr> < td> entry2< / td> < td id = entry2 oninput = myFunction（）> 200< / td> < / tr> < tr> < td>总计< / td> < td id = total>< / td> < / tr> < / table> < script type = text / javascript> document.getElementById（ entry1）。contentEditable = true; document.getElementById（ entry2）。contentEditable = true;函数myFunction（）{var entry1 = document.getElementById（ entry1）。innerText; var entry2 = document.getElementById（ entry2）。innerText; var total2 = parseInt（entry1）+ parseInt（entry2）; document.getElementById（ total）。innerHTML = total2; } myFunction（）; < / script> < / body>
如您所见，它会将右侧的数字相加列，并在最后一行显示总和。但是，我希望在此处显示无法编辑的单位（例如 kg），例如，，更重要的是，不要在JavaScript函数中将其解析为数字。如果丑陋的文本框轮廓也没有出现在单元格中，那就太好了。
这可能吗？谢谢所有答案！
调用<$会得到 NaN c $ c> parseInt 放在一个空字符串上。要解决此问题，请更改以下语句，从
var total = parseInt（jack2）+ parseInt（john2）+ parseInt（joe2）;
到
var total =（parseInt（jack2）|| 0）+（parseInt（john2）|| 0）+（parseInt（joe2）|| 0）;
并在右列中的数字旁边显示单位，请添加2 跨越元素，并使用flexbox正确对齐它们。 td 元素内的
要使数字可编辑，请在 span contentEditable 属性$ c>包含数字的元素。默认情况下，包含该单元的 span 元素是不可编辑的。
function myFunction（）{var jack2 = document.getElementById（ jack ）.innerText; var john2 = document.getElementById（ john）。innerText; var joe2 = document.getElementById（ joe）。innerText; var total =（parseInt（jack2）|| 0）+（parseInt（john2）|| 0）+（parseInt（joe2）|| 0）; document.getElementById（ total）。innerHTML = total;} myFunction（）;
table {width：100％;} table，tr，th，td {边框：1px纯黑色；边界崩溃：崩溃；字体家族：Arial，无衬线； margin：5px;} th，td {padding：5px;} td：last-child {display：flex;证明内容：间隔； border：none;} td：last-child span：first-child {flex-grow：1;右边距：10px;大纲：无； text-align：right;}＃total {display：flex; justify-content：flex-end;}
< table> ; < thead> < tr> < th>人< / th> <重量< / th> < / tr> < / thead> < tbody> < tr> < td>杰克< td> < td id = jack oninput = myFunction（）> < span contentEditable = true> 4< / span> < span> Kg< span> < / td> < / tr> < tr> < td>约翰< / td> < td id = john oninput = myFunction（）> < span contentEditable = true> 2< / span> < span> Kg< span> < / td> < / tr> < tr> < td>乔< / td> < td id = joe oninput = myFunction（）> < span contentEditable = true> 3< / span> < span> Kg< span> < / td> < / tr> < tr> < td>总计< / td> < td id = total>< / td> < / tr> < / tbody>< / table>
So, a few days ago, I posted this question (nearly identical) and received a very helpful response.
However, in order to make a table calculator, I already have a id set to every table row of a certain column to turn the table into a calculator, which kind of messes up the answer for the original question when I try to apply it for myself (the JavaScript parses the unit "kg" in with the number and displays a sum as "NaN").
As well, there is a visible text box displayed inside of every cell with the answer above, which looks kind of ugly. My current code has cells that don't appear as text boxes but are still editable, which makes for a much sleeker experience in my opinion (I know it makes no functional difference, but the appearance is something that bugs me a lot!)
Below is a mock-up of what I'd like the code to look like. I'm trying to make the numbers/input appear on the right side of the text box, but still on the left side of the unit ("kg").
Below is a mock-up of what I am trying to create (except the numbers would be on the right).
Here is the code I have:
<head>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
width: 100%;
}
th, td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>entry1</td>
<td id="entry1" oninput="myFunction()">4000</td>
</tr>
<tr>
<td>entry2</td>
<td id="entry2" oninput="myFunction()">200</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("entry1").contentEditable = true;
document.getElementById("entry2").contentEditable = true;
function myFunction() {
var entry1 = document.getElementById("entry1").innerText;
var entry2 = document.getElementById("entry2").innerText;
var total2 = parseInt(entry1) + parseInt(entry2);
document.getElementById("total").innerHTML = total2;
}
myFunction();
</script>
</body>
As you can see, it adds up the numbers in the right column and displays a sum in the final row. However, I would like units to display here (e.g. "kg") on the side, that aren't editable and, more importantly, don't get parsed as a number in the JavaScript function. Would be great if the ugly textbox outline doesn't appear inside the cell, too.
Is this possible? Any answers appreciated!
You get NaN when you call parseInt on an empty string. To fix this, change following statement from
var total = parseInt(jack2) + parseInt(john2) + parseInt (joe2);
to
var total = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt (joe2) || 0);
and to display the unit alongside the number in the right column, add 2 span elements inside the td element and use flexbox to align them properly.
To make the number editable, add contentEditable attribute on the span element containing the number. span element containing the unit will be non-editable by default.
function myFunction() {
var jack2 = document.getElementById("jack").innerText;
var john2 = document.getElementById("john").innerText;
var joe2 = document.getElementById("joe").innerText;
var total = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt(joe2) || 0);
document.getElementById("total").innerHTML = total;
}
myFunction();
table {
width: 100%;
}
table,
tr,
th,
td {
border: 1px solid black;
border-collapse: collapse;
font-family: Arial, sans-serif;
margin: 5px;
}
th,
td {
padding: 5px;
}
td:last-child {
display: flex;
justify-content: space-between;
border: none;
}
td:last-child span:first-child {
flex-grow: 1;
margin-right: 10px;
outline: none;
text-align: right;
}
#total {
display: flex;
justify-content: flex-end;
}
<table>
<thead>
<tr>
<th>Person</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td id="jack" oninput="myFunction()">
<span contentEditable="true">4</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>John</td>
<td id="john" oninput="myFunction()">
<span contentEditable="true">2</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>Joe</td>
<td id="joe" oninput="myFunction()">
<span contentEditable="true">3</span>
<span>Kg</span>
</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</tbody>
</table>
这篇关于如何使部分不可编辑的表格单元格与内联JavaScript函数兼容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
