Question

我有一个固定计数为td和tr的表。行和列的宽度和高度固定。每个td内部都有input 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的长度。

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

可能的结果：

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

Answer 1

您可以使用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>

html表jquery中下一行td的断字

1 个答案: