我如何通过点击获得td，如果它有以前td的溢出文本 [英] How can i get a td by clicking if it has previous td's overflowed text

问题描述

如果在第二个 td 中进行了点击，该文件中有前面的 td 的溢出文本，则处理程序正在返回第一个 td 作为文本属于第一个 td 。而不是我需要选择第二个 td ，而不考虑它的溢出文本。
提前致谢。

使用方法： https： //jsfiddle.net/zvbLz2n3/

解决方案

我认为不是一直将属性设置为true必须在模糊时将其设置为false，并且需要将css属性 position：relative; 设置为 td ：

  $（function（）{$（'td'）。 ''contenteditable'，'true'）。focus（）;}，blur：function（）{$（this）.attr（'contenteditable'，'false'）;}}）;}）;  

table {border-collapse：collapse;表格布局：固定; width：500px;} td {border：2px solid black; -webkit-user-select：none;宽度：25％; height：20px;白色空间：nowrap;溢出：可见;文本溢出：省略号; padding：0px;位置：相对; / *< -----在css中添加此位置* /}

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div> <表> < TR> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < / TR> < TR> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < / TR> < TR> < TD>< / TD> < TD>< / TD> < TD>< / TD> < TD>< / TD> < / TR> < / table>< / div>  

If a click is made on the second td which has overflow text of previous td, the handler is returning the first td as the text belongs to first td. Instead of that i need to select the second td irrespective of the overflow text it has. Thanks in advance.

Play with: https://jsfiddle.net/zvbLz2n3/

解决方案

I think instead of setting the attribute to true all the time you have to set it to false on blur and you need to set the css property position:relative; to the td:

$(function() {
  $('td').on({
    click: function() {
      $(this).attr('contenteditable', 'true').focus();
    },
    blur: function() {
      $(this).attr('contenteditable', 'false');
    }
  });
});

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 500px;
}
td {
  border: 2px solid black;
  -webkit-user-select: none;
  width: 25%;
  height: 20px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  padding: 0px;
  position: relative; /*<-----add this position in the css*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

这篇关于我如何通过点击获得td，如果它有以前td的溢出文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！