所以，几天前，我发布了这个问题（几乎相同），并收到了非常有用的回复。但是，为了制作表格计算器，我已经将某个列的每个表格行设置为将表格转换为计算器，当我尝试为自己应用它时，这有点弄乱了原始问题的答案（JavaScript将单位“kg”与数字一起解析，并将总和显示为“NaN”）。id同样，每个单元格内部都显示了一个可见的文本框，上面有答案，看起来有点丑陋。我目前的代码有不显示为文本框但仍然可编辑的单元格，这在我看来使体验更加时尚（我知道它没有功能差异，但外观让我很烦恼！下面是我希望代码看起来像什么的模型。我试图使数字/输入显示在文本框的右侧，但仍然在单位的左侧（“kg”）。以下是我试图创建的内容的模型（除了数字在右边）。这是我的代码：<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> 展开代码段如您所见，它将右列中的数字相加，并在最后一行中显示总和。但是，我希望在侧面显示单位（例如“kg”），这些单位不可编辑，更重要的是，在JavaScript函数中不会被解析为数字。如果丑陋的文本框轮廓也没有出现在单元格内，那就太好了。这可能吗？任何答案都值得赞赏！
2 回答
猛跑小猪
TA贡献1858条经验 获得超8个赞
当您调用空字符串时，您会得到。若要解决此问题，请将以下语句从NaNparseInt
var total = parseInt(jack2) + parseInt(john2) + parseInt (joe2);
自
var total = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt (joe2) || 0);
要将单位与右列中的数字一起显示，请在元素内添加 2 个元素，然后使用 flexbox 正确对齐它们。spantd
要使数字可编辑，请在包含数字的元素上添加属性。 默认情况下，包含该单元的 元素将不可编辑。contentEditablespanspan
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>
素胚勾勒不出你
TA贡献1827条经验 获得超9个赞
为了避免结果为“NAN”，添加了一个if，我们检查其中一个密封件是否为空“”，并将其替换为0。在编辑单元格中，添加了两个 div，一个用于编辑值，另一个用于添加文本“kg”。
<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;
}
.input_{
width: 90%;
float: left;
}
.peso{
width: 10%;
float: right;
}
</style>
<table>
<tr>
<th>Person</th>
<th>Weight</th>
</tr>
<tr>
<td>Jack</td>
<td>
<div class="input_" id="jack" oninput="myFunction()">1</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>John</td>
<td>
<div class="input_" id="john" oninput="myFunction()">2</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>Joe</td>
<td>
<div class="input_" id="joe" oninput="myFunction()">3</div>
<div class="peso">kg</div>
</td>
</tr>
<tr>
<td>Total</td>
<td id="total"></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("jack").contentEditable = true;
document.getElementById("john").contentEditable = true;
document.getElementById("joe").contentEditable = true;
function myFunction() {
var jack2 = document.getElementById("jack").innerText;
var john2 = document.getElementById("john").innerText;
var joe2 = document.getElementById("joe").innerText;
if(jack2==""){
jack2=0;
}
if(john2==""){
john2=0;
}
if(joe2==""){
joe2=0;
}
var total2 = parseInt(jack2) + parseInt(john2) + parseInt (joe2);
document.getElementById("total").innerHTML = total2+" kg";
}
myFunction();
</script>
添加回答
举报
0/150
提交
取消