html里表单几个单元格相加给一个单元格，限制输入最大最小值问题

最新推荐文章于 2022-04-02 23:21:36 发布

原创最新推荐文章于 2022-04-02 23:21:36 发布 · 682 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端开发 #表单问题

本文介绍了一种使用HTML和jQuery实现表格中输入框数值限制及自动求和的方法。通过oninput事件监听输入框的变化，并利用jQuery遍历指定名称的输入框来计算总和并显示在指定单元格。适用于简单的数值汇总场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

       html tr部分的代码
       <tr>
             <td><input name="xiaoji1" type="number" oninput="if(value>3)value=3;if(value<0)value=0"/></td>
              //限制input的最大值和最小值
             <td><input name="xiaoji1" type="number" oninput="if(value>3)value=3;if(value<0)value=0"/></td>
             <td><input name="xiaoji1" type="number" oninput="if(value>3)value=3;if(value<0)value=0"/></td>
              //三个输入值的单元格
             <td><input name="defen1" type="text"/></td>
             //输出单元格，自动获取前三个单元格相加
         </tr>
        
         js部分代码
     <script type="text/javascript" src="../jquery-3.4.1.min.js"></script> //引用jQuery
    <script type="text/javascript">
        $("input[name='xiaoji1']").bind("input propertychang",function(event){    //监听input的值
            var sum = 0;
            $.each($("input[name='xiaoji1']")),function(){
                sum += Number(this.value);
                $("input[name=defen1]").val(sum);
            }
        }
    </script>