Question

我正在尝试创建一个颜色表，当我切换到不同的色调时，我无法更改背景颜色。当我在更改后查看代码时，设置了背景颜色，但没有显示任何内容。

之前的表：

表后：

这是我用来更新表格的代码

function hueTable() { 
    var lineno, header, i, a, match, same, comp, loopHSL, HSL;
    var h = picker.hsv[0];
    var s = picker.hsv[1];
    var v = picker.hsv[2];
    var arr = [];
    lineno = 24;

    for (i = 0; i <= lineno; i++) {
      var tmp = document.createElement('SPAN');
      var tp = new jscolor(tmp);
      tp.fromHSV(i * 15, s, v);
      arr.push(tp);
    }

    a = "<table style='width:100%; white-space: nowrap; font-size: 14px;'>";
    a += "<tbody>";
    a += "<tr>";
    a += "<th><span>    </span></th>";
    a += "<th style='width:150px;'></th>";
    a += "<th>Hex</th>";
    a += "<th>Rgb</th>";
    a += "<th>Hsl</th>";
    a += "</tr>";

    match = 0;

    for (i = 0; i < arr.length; i++) {
      same = 0;
      loopHSL = arr[i].hsv[0];
      HSL = h;
      if (i == arr.length - 1) {loopHSL = 360;}
      comp = (loopHSL > HSL);

      if (HSL == loopHSL) {
        match++;
        same = 1;
      }
      if (comp) {match++;}
      if (match == 1) {
        a += "<tr>";
        a += "<td style='background-color:" + picker.toHEXString() + "'></td>";
        a += "<td style='width:20px'><span>    </span></td>";
        a += "<td><b>" + picker.toHEXString() + "</b></td>";
        a += "<td><b>" + '(' + Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]) + ')' + "</b></td>";
        a += "<td><b>" + '(' + Math.round(picker.hsv[0]) + ', ' + Math.round(picker.hsv[1]) + '%, ' + Math.round(picker.hsv[2]) + '%)' + "</b></td>";
        a += "</tr>";
        match = 2;
      }
      if (same == 0) {
        a += "<tr>";
        a += "<td style='cursor:pointer;background-color:" + arr[i].toHEXString() + "' onclick='toPicker(\"hue\", \"" + arr[i].toHEXString() + "\")'></td>";
        a += "<td style='width:20px'><span>    </span></td>";
        a += "<td>" + arr[i].toHEXString() + "</td>";
        a += "<td>" + '(' + Math.round(arr[i].rgb[0]) + ', ' + Math.round(arr[i].rgb[1]) + ', ' + Math.round(arr[i].rgb[2]) + ')' + "</td>";
        a += "<td>" + '(' + Math.round(arr[i].hsv[0]) + ', ' + Math.round(arr[i].hsv[1]) + '%, ' + Math.round(arr[i].hsv[2]) + '%)' + "</td>";
        a += "</tr>";
      }
    }
    a += "</tbody></table>";
    document.getElementById("hue-table").innerHTML = a;
 }

当我检查它产生的代码时，它似乎是正确的。这是表格的初始状态，显示背景颜色

<table style="width:100%; white-space: nowrap; font-size: 14px;">        
  <tbody>
    <tr>
      <th style="width:150px;"></th>
      <th><span>    </span></th>
      <th>Hex</th>
      <th>Rgb</th>
      <th>Hsl</th>
    </tr>
    <tr>
      <td style="background-color:#ff0000"></td>
      <td style="width: 20px"><span>    </span></td>
      <td><b>#ff0000</b></td>
      <td><b>(255, 0, 0)</b></td>
      <td><b>(0, 100%, 50%)</b></td>
    </tr>
    <tr>
      <td style="cursor:pointer;background-color:#ff4000" onclick="toPicker(&quot;hue&quot;, &quot;ff4000&quot;"></td>
      <td style="width: 20px"><span>    </span></td>
      <td>#ff4000</td>
      <td>(255, 64, 0)</td>
      <td>(15, 100%, 50%)</td>
    </tr>
  </tbody>
</table>

渲染表

<table style="width:100%; white-space: nowrap; font-size: 14px;">
  <tbody>
    <tr>
      <th><span>    </span></th>
      <th style="width:150px;"></th>
      <th>Hex</th>
      <th>Rgb</th>
      <th>Hsl</th>
    </tr>
    <tr>
      <td style="cursor:pointer;background-color:#FF0000" onclick="toPicker(&quot;hue&quot;, &quot;#FF0000&quot;)"></td>
      <td style="width:20px"><span>    </span></td>
      <td>#FF0000</td>
      <td>(255, 0, 0)</td>
      <td>(0, 100%, 100%)</td>
    </tr>
    <tr>
      <td style="background-color:#FF0A00"></td>
      <td style="width:20px"><span>    </span></td>
      <td><b>#FF0A00</b></td>
      <td><b>(255, 10, 0)</b></td>
      <td><b>(2, 100%, 100%)</b></td>
    </tr>
  </tbody>
</table>

另外如果我检查控制台没有错误

背景颜色没有变化

0 个答案: