td标签中span标签设置background的宽度和位置

guaili1752 2017-07-05 04:00:08

上图是table的一部分，根据table左侧的数据来给td填充颜色
我想给td里加一个span，然后控制<span>的位置（设置左右）和宽度就能达到效果了
<table class="table table-bordered" align="center" >
<thead>
<tr>
<th colspan="8"style="display:table-cell; vertical-align:middle">...</th>
<th colspan="16"style="display:table-cell; vertical-align:middle">...</th>
</tr>
<tr>
<th>...</th>
<th ></th>
.......
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td><span> </span></td>
</tr>
.......
</tbody>
</table>
<script>
$("table tr:eq(2) td:eq(6) span").css({
"display":"block",
"background-color":"black",
"height":"$(this).parent().css('height')",
"width":"50%",
"left":"0",
"right":"50%",
});
</script>
但是上面这种写法并不能写出一个长度为td一半，紧挨左侧的矩形,整个span都没有显示出来，该如何写

...全文

854 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

JavaTree2017 2017-07-21

打赏
举报

linear-gradient 渐变色实现起始点结束点 querySelector() 获取满足条件的第一个 querySelectorAll()

guaili1752 2017-07-06

打赏
举报

引用 3 楼 zzgzzg00 的回复:

不是特别明白你的意思可以自己查下linear-gradient 可以设置任何区间的

如果实现了之后，想把这个画了很多黑框的表格export到excel,这个怎么实现，就是说excel也会出现这样的黑框，长度位置都一样的用前端实现，

似梦飞花 2017-07-06

打赏
举报

这个不会了

似梦飞花 2017-07-05

打赏
举报

不是特别明白你的意思可以自己查下linear-gradient 可以设置任何区间的

guaili1752 2017-07-05

打赏
举报

引用 1 楼 zzgzzg00 的回复:


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<table>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
<script>
    const wtds= [...document.querySelectorAll('tr>td:nth-of-type(1)')];
    wtds.forEach(item=>item.style.backgroundImage='linear-gradient(90deg,red 0%,red 100%)');
    const htds= [...document.querySelectorAll('tr>td:nth-of-type(2)')];
    htds.forEach(item=>item.style.backgroundImage='linear-gradient(90deg,red 0%,red 30%,rgba(0,0,0,0) 0)');
</script>
</body>
</html>

如果不考虑低版本浏览器的话可以直接用linear-gradient设置半边的背景色

好像不能这样写啊，我这个数字16到17表示，16点到17点，如果左侧我没截图的数据是16:20-16:40的话，红色背景只能出现在td的中间，就是相当于把一个td的长度分成三段，16:00到16:20是靠左的第一段，16点20到16点40是第二段，16点40到17点是靠右的第三段。如果出现了在中间的时间，你这种写法就实现不了了

似梦飞花 2017-07-05

打赏
举报


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<table>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
<script>
    const wtds= [...document.querySelectorAll('tr>td:nth-of-type(1)')];
    wtds.forEach(item=>item.style.backgroundImage='linear-gradient(90deg,red 0%,red 100%)');
    const htds= [...document.querySelectorAll('tr>td:nth-of-type(2)')];
    htds.forEach(item=>item.style.backgroundImage='linear-gradient(90deg,red 0%,red 30%,rgba(0,0,0,0) 0)');
</script>
</body>
</html>

如果不考虑低版本浏览器的话可以直接用linear-gradient设置半边的背景色