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


上图是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都没有显示出来，该如何写

解决方案 »

  1.   


    <!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设置半边的背景色
      

  2.   

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

  3.   

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

  4.   

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

  5.   

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