我想使用 javaScript（无 jquery）在我的 html 表列中的 100 个字符后添加“...”或“>>”图标答案

【问题标题】：I want to add "..." or ">>" icon after 100 characters in my html table column using javaScript (No jquery)我想使用 javaScript（无 jquery）在我的 html 表列中的 100 个字符后添加“...”或“>>”图标
【发布时间】：2017-07-21 13:00:51
【问题描述】：

我想在每个 HTML 表格列的 100 个字符后添加“...”或“>>”图标。单击此图标将在一个简单的弹出窗口中呈现内容多行框。 “Esc”或单击“X”会关闭该框。

我已经使用 d3.js 解析 CSV 文件动态创建了一个表。下面是我的 HTML 和 JavaScript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>TableView</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
 <div id="table-wrapper">
   <div id="table-scroll">
         <!-- Table goes here -->
   </div>
 </div>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script type="text/javascript" charset="utf-8" src="js/app.js"></script>
 </body>
 </html>

 app.js

 d3.csv("js/tweetBlog.csv", function(error, data) {
 var sortAscending = true;
 var table = d3.select('#table-wrapper').select('#table-scroll').append('table');
var titles = d3.keys(data[0]);
var headers = table.append('thead').append('tr').selectAll('th')
              .data(titles).enter().append('th')
                       .text(function (d) {
                            return d;
                        })
                       .on('click', function (d) {
                           headers.attr('class', 'header');

                           if (sortAscending) {
                             rows.sort(function(a, b) { return b[d] < a[d]; });
                             sortAscending = false;
                             this.className = 'aes';
                           } else {
                             rows.sort(function(a, b) { return b[d] > a[d]; });
                             sortAscending = true;
                             this.className = 'des';
                           }

                       });

      var rows = table.append('tbody').selectAll('tr')
                   .data(data).enter().append('tr');
      rows.selectAll('td')
        .data(function (d) {
            return titles.map(function (k) {
                return { 'value': d[k], 'name': k};
            });
        }).enter()
        .append('td')
        .attr('data-th', function (d) {
            return d.name;
        })
        .text(function (d) {
            return d.value;
        });
  });

【问题讨论】：

你只是looking for the styletext-overflow: ellipsis;吗？
看看stackoverflow.com/questions/5474871/…
我试过“文本溢出：省略号”，但它只是隐藏了内容。我想通过单击“...”或“>>”图标来执行操作。
NineBerry 我确实看过你提到的 StackOverflow 问题，但它使用的是 jQuery，而这并不是我想要的。谢谢。
AakashTakale 在@NineBerry 链接的问题的答案中大部分（如果不是全部？）jQuery 似乎都是本机 JS 的简写方法，所以我认为它会相当易于将它们转换为原生 JS 并使用它们；我只是说，如果这些技术对你有用，你不应该仅仅因为它们是 jQuery 就立即放弃它们

标签： javascript html css d3.js

【解决方案1】：

如果您在 d3 中创建表格，那么它应该非常简单：

一个。将单元格内容限制为一定的字符长度并添加所需的“点击查看”符号。附加表格单元格时类似于以下内容：

   .html(function(d) { 
      if (d.length < 20) { return d; }
      else { return d.substring(0,19) + "<span class='expand'>>></span>" }

b.为每个显示展开内容的符号添加一个事件侦听器（以及相应的关闭内容）。类似于以下内容：

d3.selectAll('.expand')
   .on('click',function() { 
      // show tooltip
})

我已经附加了一个使用常规文本的示例，但它应该是使用 d3 将其应用于表格单元格的相同方法。虽然我没有使用 [x] 符号来关闭框，但只需单击工具提示即可将其关闭（您可以将 [x] 添加到工具提示并轻松为其分配关闭侦听器）。

var data = [
"This is text that much too verbose and thus is cut off",
"This text is too long and therefore is also cut off",
"This text is short"
];

var tooltip = d3.select("body").append("div")	
    .attr("class", "tooltip")				
    .style("opacity", 0);

var div = d3.select('body').append('div');

var text = div.selectAll('p')
   .data(data)
   .enter()
   .append('p')
   .html(function(d) { 
      if (d.length < 20) { return d; }
      else { return d.substring(0,19) + "<span class='expand'>>></span>" }
   })
   
var expand = d3.selectAll('.expand')
   .on('click',function() { 
      tooltip.html(d3.select(this.parentNode).data())	
       .style("opacity", .9)
       .style("left", (d3.event.pageX) + "px")		
       .style("top", (d3.event.pageY) + "px");	
   })
   
d3.selectAll('.tooltip')
   .on('click', function() {
      d3.select(this).style('opacity',0);
   })

div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 50px;
    height: auto;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: #d3d3d3;			
    pointer-events: all;
    padding: 10px;
    border: 1px dotted black;
}

.expand {
  cursor: pointer;
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"&gt;&lt;/script&gt;

我使用的tooltip来自d3noob的tooltipbl.ock。

【讨论】：