如何使部分不可编辑的表单元格与内联 JavaScript 函数兼容？
所以，几天前，我发布了这个问题（几乎相同），并收到了非常有用的回复。
但是，为了制作表格计算器，我已经将某个列的每个表格行设置为将表格转换为计算器，当我尝试为自己应用它时，这有点弄乱了原始问题的答案（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回答
-
猛跑小猪
当您调用空字符串时，您会得到。若要解决此问题，请将以下语句从NaNparseIntvar total = parseInt(jack2) + parseInt(john2) + parseInt (joe2);自var total = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt (joe2) || 0);要将单位与右列中的数字一起显示，请在元素内添加 2 个元素，然后使用 flexbox 正确对齐它们。spantd要使数字可编辑，请在包含数字的元素上添加属性。 默认情况下，包含该单元的 元素将不可编辑。contentEditablespanspanfunction 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> -
素胚勾勒不出你
为了避免结果为“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>
随时随地看视频慕课网APP
相关分类
JavaScript