时间戳

首页 > 解决方案 > 为表格中新添加的单元格设置特定颜色

javascript - 为表格中新添加的单元格设置特定颜色

问题描述

我有一个表，我在其中通过输入指定的位置添加新行或列。我只希望新行和单元格更改颜色选择器中指定的颜色。我有这个 html

<label>Position</label>
        <input type="number" id="poz">
        <br />
        <label for="culoare">Color:</label>
        <input type="color" value="#ff0000" id="fundal" name="culoare"><br />
        <br />
        <button id="linie" onclick="insertRow();">Inserează linie</button>
        <button id="coloana" onclick="insertCol();">Inserează coloană</button>
        <br />
        <br />
        <table id="js-table">
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
            <tr>
                <td>Data</td>
                <td>Data</td>
                <td>Data</td>
            </tr>
        </table>

这些是javascript中的函数

function insertRow() {
var table = document.getElementById("js-table");
var len = document.getElementById("js-table").rows.length;
var val = document.getElementById("poz").value;
var culoare = document.getElementById("fundal").value;
var row = table.insertRow(val);
var cell=[];

for(let i = 0; i<len;i++)
{
    cell[i] = row.insertCell(i);
    cell[i].innerHTML = "New Row"+i;
}

}

function insertCol() {
var val = document.getElementById("poz").value;
var culoare = document.getElementById("fundal").value;
var firstRow = document.getElementById("js-table").rows[0];
var x = firstRow.insertCell(val);
x.innerHTML = "New Col";
}

插入没问题，但我不知道如何获取这些单元格并将它们的颜色更改为颜色选择器中指定的颜色

标签： javascripthtml

解决方案

您可以使用x.style和来完成background-color。
所以这里颜色选择器的值在culoare变量中，所以写x.style = "background-color: " + culoare + ";";

这是你的代码：

function insertRow() {
  var table = document.getElementById("js-table");
  var len = document.getElementById("js-table").rows.length;
  var val = document.getElementById("poz").value;
  var culoare = document.getElementById("fundal").value;
  var row = table.insertRow(val);
  var cell=[];

  for(let i = 0; i<len;i++)
  {
      cell[i] = row.insertCell(i);
      cell[i].innerHTML = "New Row"+i;
      cell[i].style = "background-color: " + culoare + ";"; //Set the background color
  }
}

function insertCol() {
  var val = document.getElementById("poz").value;
  var culoare = document.getElementById("fundal").value;
  var firstRow = document.getElementById("js-table").rows[0];
  var x = firstRow.insertCell(val);
  x.innerHTML = "New Col";
  x.style = "background-color: " + culoare + ";"; //Set the background color
}

现场演示：https ://codepen.io/marchmello/pen/rNVEbXb?editors=0010

推荐阅读