如何正确 show/hide Table 的 TD 的右边框

Question

我想灵活地hide/show table 中一些TD的右边框，但是TD的边框颜色可以不同，例如红色、黑色或蓝色，所以我不能只做下面这样的事情：

td.style.borderRightColor = shouldShow ? 'black' : 'white';

因为 td 边框可以是任何颜色和任何背景，例如

 <td style="border:1px solid rgb(xx, yy, zz);width:100px"></td>

相反，我想知道是否有办法使 TD 的边框透明。比如，将边框的 RGBA 的 A 设置为 0，但为了做到这一点，我首先需要知道边框的当前 RGB？或者，还有其他方法吗？

Answer 1

您可以使用 border-width。或者在你的情况下，border-right-width:

const borderWidth = '1px'; // this will depend on what width you're using already.
const noBorderWidth = '0';
td.style.borderRightWidth = shouldShow ? borderWidth : noBorderWidth ;

或border-style (border-right-style):

const borderStyle = 'solid'; // this will depend on what border-style you're using already.
const noBorderStyle = 'none';
td.style.borderRightStyle = shouldShow ? borderStyle : noBorderStyle;

如何正确 show/hide Table 的 TD 的右边框

How to properly show/hide the right border of Table's TD

html

javascript

html-table