如何使部分不可编辑的表格单元格与内联 JavaScript 函数兼容？

Question

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").但是，为了制作一个表格计算器，我已经为某一列的每个表格行设置了一个id ，以将表格变成一个计算器，当我尝试应用它时，这会弄乱原始问题的答案我自己（JavaScript 用数字解析单位“kg”并将总和显示为“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").我试图让数字/输入出现在文本框的右侧，但仍然在单位的左侧（“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 (eg "kg") on the side, that aren't editable and, more importantly, don't get parsed as a number in the JavaScript function.但是，我希望在侧面显示单位（例如“kg”），这些单位不可编辑，更重要的是，不要将其解析为 JavaScript function 中的数字。 Would be great if the ugly textbox outline doesn't appear inside the cell, too.如果丑陋的文本框轮廓也没有出现在单元格内，那就太好了。

Is this possible?这可能吗？ Any answers appreciated!任何答案表示赞赏！

Answer 1

You get NaN when you call parseInt on an empty string.当您在空字符串上调用parseInt时，您会得到NaN 。 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.并在右栏中的数字旁边显示单位，在td元素内添加 2 个span元素并使用 flexbox 正确对齐它们。

To make the number editable, add contentEditable attribute on the span element containing the number.要使数字可编辑，请在包含数字的span元素上添加contentEditable属性。 span element containing the unit will be non-editable by default.默认情况下，包含该单位的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 { 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>

Answer 2

To avoid the result being "NAN", an if is added and we check the one of the seals is empty '' and replace it with a 0. In the edit cell two divs are added one to edit the value and the other to add the text "kg".为避免结果为“NAN”，添加了一个 if 并检查其中一个封条为空 '' 并将其替换为 0。在编辑单元格中添加了两个 div，一个用于编辑值，另一个用于添加文字“公斤”。

<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>

如何使部分不可编辑的表格单元格与内联 JavaScript 函数兼容？

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-06-07 15:28:28

解决方案2
1 2020-06-07 15:40:59

如何使部分不可编辑的表格单元格与内联 JavaScript 函数兼容？

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-06-07 15:28:28

解决方案2 1 2020-06-07 15:40:59

解决方案1
1 已采纳 2020-06-07 15:28:28

解决方案2
1 2020-06-07 15:40:59