时间戳

首页 > 解决方案 > 如何使部分不可编辑的表格单元格与内联 JavaScript 函数兼容？

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

问题描述

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

但是，为了制作一个表格计算器，我已经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 函数中被解析为数字。如果丑陋的文本框轮廓也没有出现在单元格内，那就太好了。

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

标签： javascripthtmlcss

解决方案

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

推荐阅读