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

How to make a partially un-editable table cell compatible with inline JavaScript functions?

提问人：ttoshiro 提问时间：6/7/2020 最后编辑：ttoshiro 更新时间：6/9/2020 访问量：128

问：

所以，几天前，我发布了这个问题（几乎相同），并收到了一个非常有帮助的回复。

但是，为了制作表格计算器，我已经对某一列的每个表格行设置了一个集合，以将表格变成计算器，当我尝试为自己应用它时，这会弄乱原始问题的答案（JavaScript 将单位“kg”与数字解析，并将总和显示为“NaN”）。id

同样，每个单元格内都有一个可见的文本框，上面显示答案，看起来有点丑陋。我当前的代码中的单元格不显示为文本框，但仍然是可编辑的，在我看来，这带来了更时尚的体验（我知道这在功能上没有区别，但外观让我很烦恼！

下面是我想要的代码外观的模型。我试图使数字/输入出现在文本框的右侧，但仍然显示在单位的左侧（“kg”）。

下面是我尝试创建的模型（除了数字在右边）。

Updated mock-up

这是我拥有的代码：

<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 函数中被解析为数字。如果丑陋的文本框轮廓也没有出现在单元格内，那就太好了。

这可能吗？任何答案都值得赞赏！

JavaScript HTML CSS

评论

0赞 FZs 6/9/2020
[题外话]：你还应该把你的内容编辑成单行

答：

1赞 Yousaf 6/7/2020 #1

当你调用一个空字符串时，你会得到。要解决此问题，请将以下语句从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>

评论

0赞 ttoshiro 6/9/2020
感谢您的回复。我喜欢这个设计（可编辑，没有可见的文本框），但是有没有办法让数字从右侧开始？
0赞 ttoshiro 6/12/2020
谢谢。和 和有什么不一样？它们不是一回事吗？td:child#total
1赞 Yousaf 6/12/2020
你的意思是和之间的区别，对吧？ 将选择作为其父元素的最后一个子元素的所有元素，而只选择具有 ID 的元素。td:last-child#totaltd:last-childtd#targettarget
1赞 Jairo Rodriguez 6/7/2020 #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>

评论

0赞 ttoshiro 6/9/2020
感谢您的回复。是否可以在右侧显示数字 （_input），但仍然显示在“kg”的左侧？如果是这样，如何？
0赞 Jairo Rodriguez 6/10/2020
是的，在类样式“input_”中添加“text-align： end;”。并在 kg div “&nbsp;” 中表示空格

上一个：如何更改 Firebase 提供的文件的目录/文件路径？

下一个：如何扩展表格单元格的可编辑区域？