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

【问题标题】：How to make a partially un-editable table cell compatible with inline JavaScript functions?如何使部分不可编辑的表格单元格与内联 JavaScript 函数兼容？
【发布时间】：2020-06-07 15:07:27
【问题描述】：

所以，几天前，I posted this question（几乎完全相同）收到了非常有帮助的回复。

但是，为了制作一个表格计算器，我已经为某一列的每个表格行设置了一个id，以将表格变成一个计算器，这在我尝试为自己应用它（JavaScript 用数字解析单位“kg”并将总和显示为“NaN”）。

此外，每个单元格内都有一个可见的文本框，上面有答案，看起来有点难看。我当前的代码包含不显示为文本框但仍可编辑的单元格，这在我看来提供了更流畅的体验（我知道它没有功能差异，但外观让我很烦恼！）

下面是我希望代码看起来像的模型。 我正在尝试使数字/输入显示在文本框的右侧，但仍显示在单位（“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 函数中被解析为数字。如果丑陋的文本框轮廓也没有出现在单元格内，那就太好了。

这可能吗？任何答案表示赞赏！

【问题讨论】：

[题外话]：你也应该让你的内容可编辑single-line

标签： javascript html css

【解决方案1】：

当您在空字符串上调用 parseInt 时，您会得到 NaN。要解决此问题，请从

更改以下语句

var total = parseInt(jack2) + parseInt(john2) + parseInt (joe2);

到

var total = (parseInt(jack2) || 0) + (parseInt(john2) || 0) + (parseInt (joe2) || 0);

要在右栏中的数字旁边显示该单位，请在 td 元素内添加 2 个 span 元素并使用 flexbox 正确对齐它们。

要使数字可编辑，请在包含数字的span 元素上添加contentEditable 属性。 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>

【讨论】：

感谢您的回复。我喜欢这种设计（可编辑，没有可见的文本框），但是有没有办法让数字从右侧开始？
谢谢。 td:child 和 #total 有什么区别？它们不是一回事吗？
您的意思是td:last-child 和#total 之间的区别，对吧？ td:last-child 将选择作为其父元素最后一个子元素的所有 td 元素，而 #target 将仅选择 ID 为 target 的元素。

【解决方案2】：

为避免结果为“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>

【讨论】：

感谢您的回复。是否可以在右侧显示数字（_input），但仍显示在“kg”的左侧？如果有，怎么做？
是的，在类样式“input_”中添加“text-align: end;”。并在 kg div " "空间