- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在网络上制作文件浏览器的原型(prototype),它有一个显示文件列表的表格。我想让表格灵活,根据屏幕宽度调整列宽,并 chop 文件名以在单元格中仅显示 1 行文本。我希望它 chop 中间的字符串,而不是尾部的字符串,以显示文件扩展名。
我能够通过一些研究来编写代码。但问题是,代码似乎太重了,所以当我测试它时,它会使 web View 变慢并且有时会崩溃。有没有更简单的方法可以得出相同的结果?
function getvisualLength(target){
var ruler = document.getElementById("ruler");
ruler.innerHTML = target;
return ruler.offsetWidth;
}
function getTrimmedString(targetString, targetWidth){
var tmp = targetString;
var tail = targetString.substr(targetString.indexOf('.')-3);
var truncLength = getvisualLength("...");
var tailLength = getvisualLength(truncLength);
if (getvisualLength(tmp) > targetWidth){
while (getvisualLength(tmp) > (targetWidth-(truncLength+tailLength+10))){
tmp = tmp.substr(0, tmp.length-1);
}
}
else{
return tmp;
}
return tmp+"..."+tail;
}
window.addEventListener("resize", function(){
var table = document.getElementById("listTable");
for (var i = 4; i < table.rows.length; i++){
var getCellWidth = document.getElementById("listTable").rows[0].cells[2].offsetWidth;
var str = files[i][0];
var tmp = getTrimmedString(str, getCellWidth);
document.getElementById("listTable").rows[i].cells[2].innerHTML = tmp;
}
});
function addListToTable(target, list){
var table = document.getElementById(target);
for (var i=0; i<list.length; i++){
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var getIconSource;
row.style.cssText = "height:41px; border-bottom: 1px solid #f4f4f4";
for (var k=0; k<thmbIconList.length; k++){
if (thmbIconList[k][0] == list[i][2]){
getIconSource = thmbIconList[k][1];
}
}
row.clickStat = "off";
row.id = "tableRow";
var checkbox = row.insertCell(0);
var type = row.insertCell(1);
var name = row.insertCell(2);
var owner = row.insertCell(3);
var lastmodified = row.insertCell(4);
var update = row.insertCell(5);
var size = row.insertCell(6);
checkbox.innerHTML = "<img src=\"assets/unchecked.png\" style = \"width: 16px; display: table-cell; margin: auto;\">"
type.innerHTML = "<img src=\""+getIconSource+"\"style = \"width: 20px; display: table-cell; margin: auto;\">"
name.innerHTML = list[i][0];
name.style.cssText = "display: block;"
name.style.cssText = "text-align: left; padding-left: 18px";
owner.innerHTML = "me";
owner.style.cssText = "min-width: 72px; text-align: center"
lastmodified.innerHTML = list[i][1];
lastmodified.style.cssText = "min-width: 72px; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; text-align: center";
update.innerHTML = list[i][1];
update.style.cssText = "min-width: 72px; text-align: center";
size.innerHTML = list[i][3];
size.style.cssText = "min-width: 72px;text-align: center";
}
}
addListToTable("listTable", folders);
addListToTable("listTable", files);
var folders = [["Documents", "Oct 24 2019", "folder","-"], ["MyFolder_1", "Jan 2 2019", "folder","-"], ["MyFolder_2", "Oct 1 2019", "folder","-"]]
var files = [["description20191025.docx","Oct 25 2019","word", "20MB"], ["description20191025.pptx","Oct 25 2019","ppt", "20MB"], ["description20191025.xlsx","Oct 25 2019","excel", "20MB"], ["nppt_slideBackup.nppt","Oct 25 2019","nppt", "20MB"],["7D65EC6E-4A3882CF.png", "Oct 21 2019", "img", "128MB"], ["photo-153855424537648538.png", "Oct 17 2019", "img", "1.2MB"], ["photo-1538537642458538.png", "Oct 17 2019", "img", "20MB"], ["photo-15385376424548538.png", "Oct 17 2019", "img", "128MB"], ["photo-15385376425248538.png", "Oct 17 2019", "img", "1.2MB"]]
#ruler { visibility: hidden; white-space: nowrap; }
#listTable{
width: calc(100% - 20px);
border-collapse: collapse;
}
.listTable_firstRow{
height: 41px;
border-bottom: 1px solid #d8d8d8;
}
<table id = "listTable">
<tr class = "listTable_firstRow">
<th style = "width: 54px;"><img src="assets/unchecked.png" style = "width: 16px; display: table-cell; margin: auto;" id = "tableSelAll"></th>
<th style = "width: 54px;">Type</th>
<th style = "text-align: left;padding-left: 18px; min-width: 0px;">Name</th>
<th style = "width: 12%; min-width: 72px;">Owner</th>
<th style = "width: 12%; min-width: 72px;">Last modified</th>
<th style = "width: 12%; min-width: 72px;">Updated</th>
<th style = "width: 12%; min-width: 72px;">File size</th>
</tr>
</table>
最佳答案
您可以使用 JavaScript 的 str.replace();
函数来实现正则表达式。
可在此处找到示例:Replacing filename with a Regex in JavaScript
您可以拆分每个字符串以删除前三个字符,然后修改示例中的代码以替换文件名中除扩展名之外的所有字符。
像这样:
function truncateFilename(str) {
// Find first 3 characters of filename
var start = str.substring(0,3);
/* Replace everything before the final '.' with an ellipsis.
* The final '.' is retained and therefore only two additional '.' are needed.
*/
var end = str.replace(/^.*(?=\.[^.]+$)/g, "..");
/* Append resulting extention to the first 3 characters of
* the file name that we found earlier.
*/
return start + end;
}
var filename = "my_very_long_file_name.exe";
console.log(truncateFilename(filename));
我做了 a fiddle这样您就可以对其进行测试。
关于您的尺子问题,我建议您针对您遇到的每个问题发布一个单独的问题,您更有可能找到解决方案。你的问题已经有了答案here . offsetWidth
包括填充、边框等,而 clientWidth
测量元素的实际宽度。你应该尝试:
function getvisualLength(target){
var ruler = document.getElementById("ruler");
ruler.innerHTML = target;
return ruler.clientWidth;
}
关于javascript - 调整表格大小时如何通过在字符串中间放置省略号来 chop 字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59334548/
有人可以给我一个更简单的以下代码的解决方案(它正在展开给定结构 0xFC :: len :: payload :: ... :: 0x0A :: 0x0D 的整数列表): object Payload
我已经在我的网站上安装了 SSL 证书,但 intermediate.crt 无法正常工作。任何 SSL 检查器(例如 GeoTrust Checker)都告诉我,缺少中间 key 。网站上已经使用了
如何让图像从这个框的中间开始? (中间纵横) 最佳答案 有几种方法可以做到这一点,如果它需要在所有浏览器(IE7+ 和其他浏览器)中工作,你需要做不同的事情来让它在某些情况下工作。 使用绝对位置
如何强制 min-height 和 vertical-align:middle 为 td 元素或其内部元素工作? 最佳答案 td 元素上的 height 等同于 min-height,因为如果需要,表
我正在尝试自动滚动到订单簿的中间行。 我有 orderBook div,其中放置了带有 orderBook 的表。该表的其中一行有一个 id middleRow。我想做的是滚动该行并将其放置在 ord
我正在尝试在 javascript 中计算绝对定位元素的 transform-origin 属性,以便它们在悬停时填充整个视口(viewport)。 我尝试通过 x 除以窗口宽度和 y 除以窗口高度来
我有休闲字符串 ' this is my string ' 是否可以删除开头和结尾的所有空格,只在单词之间留一个空格。 要选择我使用过的所有空间: SELECT regexp_replace('
我正在设法创建我的第一个复杂的 J2E 解决方案,并且在每个教程中我都发现了某种中间表的用法,如下所示: 表:用户、用户角色、角色虽然逻辑会简单地向用户表添加一个键来引用它在角色表上的角色,但为什么要
我正在寻找以下解决方案。我想定位一个图像元素,例如 在中间。所以高度是视口(viewport)的高度,宽度会自动设置,图像的中间应该在视口(viewport)宽度的中间。 我搜索的一个例子就像下面的网
我正在设计一种布局,它更像是注册用户的个人仪表板。我让它变得简单,使用基本的 2 列网格,一个用于侧边栏,一个用于主要内容。 因为,例如,80% 的网站使用将发生在一个单独的子系统中,在无 chrom
我有三个不同的 div 标签(不在彼此内部)和代码,所以它有一个把单词放在左边、中间或右边,但中心非常偏离中心。这是 HTML 代码: .desc { float: right; color:
我有以下CSS http://jsbin.com/azivip/75/edit我想让黄色的 div 高度填充蓝色和绿色 div 之间的空间。使用高度继承似乎使 div 超出了绿色 div。 有什么想法
我不得不在其父元素的中间放置一些文本。我用下面的代码实现了它: #div1 { position: relative; margin: 0; padding: 0; } #div2 {
发现一个使用合法证书(由thawte 签名)的网站,但所有浏览器都会拒绝它。我不明白为什么。thawte 的支持告诉我一个域有两个证书,然后将这个 https://www.sslshopper[dot
我正在尝试使用 OpenSSL 创建证书链,但出于某种原因,当我在我的计算机上安装我的根 CA 并尝试验证证书链时,它总是告诉我它找不到证书的颁发者.为了让事情发生,我必须安装中间 CA,这是没有意义
我看到 REST 的一大好处是依赖 HTTP 缓存。我不是在争论这个,而是完全认同这个想法。但是,我从来没有看到对中间 HTTP 缓存的更深入的解释。 如果我将 Cache-control heade
查看此图片 Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE ) 我怎样才能做到这一点? 详细信息:- 带有 2px 红色边框的 di
我的任务是制作漂亮的文本,在文本中间加一条白线,如下图所示。是否可以使用 css 来实现?这是 Fiddle .container{ height:200px; width:400px;
在拉丁文字中,字母有大写和小写形式。在 Python 中,如果你想比较两个字符串而不考虑它们的大小写,你可以使用 'string'.upper() 或 'string'.lower() 将它们转换为相
我正在使用 awk 对文件进行一些文本处理。例如删除尾随空格。 awk '{gsub(/ +$/, "")} {print $0}' filename 这很好用。但是当我将输出重定向到原始文件时。它变
我是一名优秀的程序员,十分优秀!