表格中等寬單元格td之---獲取節點下字符串的寬度

      當咱們給了table一個固定寬度時或者寬度爲100%時，若是不給tr和td固定的width、height。table內部的tr和td會根據其自身的內容自動適應寬度和高度，項目中提出了一個需求，想讓table中的某些tr（或者td）的寬度根據這些部分的內容，選出最大寬度，在賦值給這幾個tr（或者td），從而作到部分tr（或者td）等寬

原圖是這樣的：產量列下的td長短不一

 

解決辦法：

（一）首先我想到了table的 標籤本身的屬性：

table-layout:fixed ;

此屬性可讓table標籤內部的單元格td等寬顯示(不設置寬度)； 可是並無達到想要的效果---此時全部的單元格td都是等寬的，如圖

 

顯然沒有達到想要的效果

（二）本身寫了段js。下面是代碼，作了一下簡單的封裝

 1     function getStrWidth(elementClass){//獲取傳入節點的寬度
 2         /* 參數爲要獲取內容寬度的節點名字（字符串） */
 3 
 4         var elementsArr = [];
 5         var elefontSizeArr = [];
 6         var curElements =     
 7      document.getElementsByClassName(elementClass);
 8 
 9         for (var i = 0; i < curElements.length; i++) {
10 
11           var eleWidth = curElements[i].innerHTML;
12           var eleFontSize = getCssValue(curElements[i],'fontSize').slice(0,-2);
13 
14           elefontSizeArr.push(Number(eleFontSize));//每一個節點內容的fontSize
15           elementsArr.push(Number(eleWidth));
16         }
17         return getMaxWidth(elementsArr,elefontSizeArr);
18         
19       }
20 
21        function getMaxWidth(arr,elefontSizeArr){//把獲得的字符串數組拆分紅 算str的clientWidth 取最大值返回
22 
23         var newArr = [];
24         for (var i = 0; i < arr.length; i++) {
25           var transArr = arr[i].toString().split('');
26           newArr.push(transArr);
27         }
28 
29         var subArr = [];
30 
31         for (var i = 0; i < newArr.length; i++) {
32           var width = 0;
33           for (var j = 0; j < newArr[i].length; j++) {
34 
35             getStrClientWidth(newArr[i][j], elefontSizeArr[i]);
36             width += getStrClientWidth(newArr[i][j], elefontSizeArr[i]);
37           }
38           subArr.push(width);
39         }
40 
41         return Math.max(...subArr);
42 
43       }
44       function getStrClientWidth(item, fontSize){//一個字符的寬度賦值判斷
45         /*.
46           規定：
47           數字、小數點、小寫字母爲一類 (寬度一致)
48           大寫字母爲一類 (寬度一致)
49           其餘爲一類 (寬度一致)
50          */
51      
52         var numArr = ['0','1','2','3','4','5','6','7','8','9','.'];
53 
54         var lowerCaseArr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
55 
56         var upperCaseArr = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
57 
58         if (numArr.includes(item) || lowerCaseArr.includes(item)) {
59           return fontSize / 2;
60 
61         } else if (numArr.includes(item)) {
62           return fontSize / 2 + 2 * (fontSize / 12);
63 
64         } else {
65           return fontSize;
66 
67         }
68 
69       }
70       function getCssValue(element, propertyName) {//獲取節點屬性
71         return element.currentStyle ? element.currentStyle[propertyName] : document.defaultView.getComputedStyle(element, false)[propertyName];
72       }
73 
74 
75        console.log(getStrWidth('equal-width-ele')) // 獲得了通過對比以後的全部class爲'equal-width-ele'的節點的最大寬度

能夠直接調用getStrWidth()方法獲得想要的自字符串的寬度，例：

console.log(getStrWidth('equal-width-ele'))

意思是獲取頁面中全部calss爲wrap的節點內部內容的寬度的最大值

給咱們想要的td動態添加這個最大值即可，此時產量列下的單元格自適應等寬，其他列自適應如圖

注：不一樣font-family下的字符寬度是不同的，能夠在 getStrClientWidth 方法下面去更改字符寬度的定義規則

修正：   js中有個方法，能夠直接獲取元素到寬高和位置，element.getBoundingClientRect() , 

　　　　此方法返回一個對象

　　　　DOMRect {x: 8, y: 8, width: 28.125, height: 22, top: 8, …}

那我上面寫的一堆js就忽略吧，慚愧。。。