我想添加「...」或「>>」在我的HTML表格列100個字符後使用javaScript（無jquery）

我想在100個字符後添加「...」或「>>」圖標在我的每個HTML表格列中。點擊這個圖標將會在一個簡單的彈出框中渲染內容。 'Esc'或點擊'X'關閉框。我想添加「...」或「>>」在我的HTML表格列100個字符後使用javaScript（無jquery）

我已經使用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; 
     }); 
    });

來源

2017-03-02 Aakash Takale

你只是[尋找風格]（https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow）'text-overflow：ellipsis;'？ – Mark

看看http://stackoverflow.com/questions/5474871/html-how-can-i-show-tooltip-only-when-ellipsis-is-activated – NineBerry

我試過「文本溢出：省略號」，但它只是隱藏內容。我想通過點擊「...」或「>>」圖標來執行操作。 –

如果要創建在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") \t 
 
    .attr("class", "tooltip") \t \t \t \t 
 
    .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()) \t 
 
     .style("opacity", .9) 
 
     .style("left", (d3.event.pageX) + "px") \t \t 
 
     .style("top", (d3.event.pageY) + "px"); \t 
 
    }) 
 
    
 
d3.selectAll('.tooltip') 
 
    .on('click', function() { 
 
     d3.select(this).style('opacity',0); 
 
    })

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

 
.expand { 
 
    cursor: pointer; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>

我使用的工具提示來自d3noob的工具提示bl.ock。

來源

2017-03-02 05:14:29

我想添加「...」或「>>」在我的HTML表格列100個字符後使用javaScript（無jquery）

回答

相關問題