为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

冉冉说 2022-09-23 17:00:41

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

但是,为了制作表格计算器,我已经将某个列的每个表格行设置为将表格转换为计算器,当我尝试为自己应用它时,这有点弄乱了原始问题的答案(JavaScript将单位“kg”与数字一起解析,并将总和显示为“NaN”)。id

同样,每个单元格内部都显示了一个可见的文本框,上面有答案,看起来有点丑陋。我目前的代码有不显示为文本框但仍然可编辑的单元格,这在我看来使体验更加时尚(我知道它没有功能差异,但外观让我很烦恼!

下面是我希望代码看起来像什么的模型。我试图使数字/输入显示在文本框的右侧,但仍然在单位的左侧(“kg”)。

以下是我试图创建的内容的模型(除了数字在右边)。

http://img3.sycdn.imooc.com/632d75ca0001313508620588.jpg

这是我的代码:


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

?
猛跑小猪

TA贡献1531条经验 获得超8个赞

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


查看完整回答
反对 回复 2022-09-23
?
素胚勾勒不出你

TA贡献1499条经验 获得超9个赞

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


查看完整回答
反对 回复 2022-09-23
  • 2 回答
  • 0 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信