gpt4 book ai didi

javascript - 如何适应不同表格的 td 宽度?

转载 作者:行者123 更新时间:2023-11-28 01:45:03 25 4
gpt4 key购买 nike

实际td的宽度是实数,但不知道offsetWidth是否只返回整数。是否有任何其他属性以实数返回单元格的长度?在chrome的开发者工具中,按CTRL+SHIFT+C快捷键可以看到长度,是不一样的。如果我使用 jQuery,我可以更容易地达到长度吗?

function fitWidth(selector1, selector2) {
console.log('fitWidth is excuted');
let tableHeadElements = document.getElementsByClassName(selector1);
let tableBodyElements = document.getElementsByClassName(selector2);
for (let i = 0; i < tableHeadElements.length; i++) {
let tableDataOfFirstHeadTableRow = tableHeadElements[i].firstElementChild.children; // head의 첫번째 tr
let tableDataOfFirstBodyTableRow = tableBodyElements[i].firstElementChild.children; // body의 첫번째 tr
console.log("body tr count: " + tableDataOfFirstBodyTableRow.length);
for (let j = 0; j < tableDataOfFirstHeadTableRow.length; j++) {
let headCell = tableDataOfFirstHeadTableRow[j];
let bodyCell = tableDataOfFirstBodyTableRow[j];
console.log("head-cell width: " + headCell.clientWidth, "body-cell width: " + bodyCell.clientWidth);
/*
headCell.style.width = (bodyCell.offsetWidth) + "px";
headCell.style.width = (bodyCell.scrollWidth) + "px";
*/
if (headCell.clientWidth != bodyCell.clientWidth) {
headCell.clientWidth > bodyCell.clientWidth ? bodyCell.style.width = headCell.clientWidth + "px" : headCell.style.width = bodyCell.clientWidth + "px";
}
}
}
};
<!DOCTYPE HTML>
<html>

<head>

</head>

<body>
<table border="1">
<thead id="a" class="queue-head">
<tr>
<td>AppName</td>
<td>QueueName</td>
<td>Server</td>
<td>Service</td>
<td>ReceptionCount</td>
<td>ProcessingCount</td>
<td>QueueCount</td>
<td>Limit</td>
<td></td>
</tr>
</thead>
</table>
<table border="1">
<tbody id="b" class="queue-body">
<tr>
<td>ABC</td>
<td>ABCDEFGHI</td>
<td>abcd01</td>
<td>9999</td>
<td>400</td>
<td>999</td>
<td>20000</td>
<td>2000</td>
<td></td>
</tr>
<tr>
<td>ABC</td>
<td>ABCDEFGHI</td>
<td>abcd01</td>
<td>9999</td>
<td>400</td>
<td>999</td>
<td>20000</td>
<td>2000</td>
<td></td>
</tr>
</tbody>
</table>

<hr />

<table border="1">
<thead class="queue-head">
<tr>
<td>AppName</td>
<td>QueueName</td>
<td>Server</td>
<td>Service</td>
<td>ReceptionCount</td>
<td>ProcessingCount</td>
<td>QueueCount</td>
<td>Limit</td>
<td></td>
</tr>
</thead>
</table>
<table border="1">
<tbody class="queue-body">
<tr>
<td>A22</td>
<td>ABCDEFGHI</td>
<td>abcd01</td>
<td>9999</td>
<td>400</td>
<td>999</td>
<td>20000</td>
<td>2000</td>
<td></td>
</tr>
<tr>
<td>A22</td>
<td>ABCDEFGHI</td>
<td>abcd01</td>
<td>9999</td>
<td>400</td>
<td>999</td>
<td>20000</td>
<td>2000</td>
<td></td>
</tr>
</tbody>
</table>

<hr />
<button onclick='fitWidth("queue-head", "queue-body");'>fit width</button>
</body>

</html>

最佳答案

你应该使用 getBoundingClientRect()它返回一个非四舍五入的数字。

两者都是offsetWidthclientWidth返回一个四舍五入的整数。这些页面状态:

Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

关于javascript - 如何适应不同表格的 td 宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50225584/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com