如何实现新增表格行中指定可编辑TD仅允许输入数字？

DevOps 小满

2026-5-14

问题：表格新增行时指定单元格仅允许数字输入，其他单元格正常输入且不影响日期选择器

我现在卡在一个简单功能上了——我有一个包含20多列的表格，部分列可编辑、部分不可编辑。需求很明确：用户新增一行时，该行里的部分单元格只能输入数字。

我试过两种方案：

限制TD仅输入数字
使用isNumeric()做数字输入验证

但这俩都不管用，只有把函数绑定到整个表格的时候才生效，可表格里还有需要接收字符串的单元格，这种绑定整个表格的方式根本行不通。

我用的代码如下：

JavaScript 代码

$("#my_id").keydown(function(e) { if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 || ((e.keyCode == 65 || e.keyCode == 86 || e.keyCode == 67) && (e.ctrlKey === true || e.metaKey === true)) || (e.keyCode >= 35 && e.keyCode <= 40)) { return; } if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } });

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="my_id" border="1" width="100px" height="50px">
 <thead></thead>
 <tbody>
 <tr>
 <th>1</th>
 <td class="allow_only_numbers" contenteditable="true" id="idid"></td>
 </tr>
 </tbody>
</table>

这段代码在Stack Overflow上没法运行（因为没引入对应脚本），但在我自己的项目里引入后是能运行的，不过会导致日期选择器异常，没法正常使用。我感觉这应该是个小问题，但就是找不到解决办法。