gpt4 book ai didi

javascript - html表jquery中下一行td的断词

转载 作者:太空宇宙 更新时间:2023-11-04 06:07:02 24 4
gpt4 key购买 nike

我有一个固定计数为 td 的表和 tr .行和列具有固定的宽度和高度。每个tdinput type="text"里面。我怎样才能转到下一个 tr不适合 td 的文本长度?

示例表:

<html>
<body>
<table style="width:100px">
<tr style="height:12px">
<td style="width=50px"><input type="text" style="width:100%" value="12 34 56 44"></td>
<td style="width=50px"><input type="text" style="width:100%" value="786 5"></td>
</tr>
<tr>
<td style="width=50px"><input type="text" style="width:100%" value=""></td>
<td style="width=50px"><input type="text" style="width:100%" value=""></td>
</tr>
</table>
</body>
</html>

有左上角的值input不适合左上角的长度td .

如何从左上角 input 穿透值到下一个单元格 input下面,不适合左上角的长度 td使用 jquery?

这里可能的结果:

<html>
<body>
<table style="width:100px">
<tr style="height:12px">
<td style="width=50px"><input type="text" style="width:100%" value="12 34"></td>
<td style="width=50px"><input type="text" style="width:100%" value="786 5"></td>
</tr>
<tr>
<td style="width=50px"><input type="text" style="width:100%" value="56 44"></td>
<td style="width=50px"><input type="text" style="width:100%" value=""></td>
</tr>
</table>
</body>
</html>

最佳答案

您可以使用scrollWidth 来检查文本是否溢出

这是代码片段。请注意,为了简单起见,我向两个输入添加了两个 ID,如果需要,您可以删除它们并轻松更改 jquery 代码。

while($('#in')[0].scrollWidth > $('#in').innerWidth()){
var inputText = $('#in').val();
var last = inputText.substr(inputText.length - 1);
$('#in').val(inputText.slice(0,-1));
$('#out').val($('#out').val() +''+ last);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<html>
<body>
<table style="width:100px">
<tr style="height:12px">
<td style="width=50px"><input type="text" id="in" style="width:100%" value="12 34 56 44"></td>
<td style="width=50px"><input type="text" style="width:100%" value="786 5"></td>
</tr>
<tr>
<td style="width=50px"><input type="text" id="out" style="width:100%" value=""></td>
<td style="width=50px"><input type="text" style="width:100%" value=""></td>
</tr>
</table>
</body>
</html>

关于javascript - html表jquery中下一行td的断词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56765309/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com