Question

我正在尝试创建一个单独的函数，一旦生成一个表，就可以在输入中放置一个值x和y，它会突出显示某个颜色所需的单元格。

当我尝试专门选择单元格时，我的问题就出现了，我的代码在

处崩溃了

@property

＆＃13;

var change  = document.getElementById("table").tr[rowIndex].td[cellIndex];

＆＃13;

// functions to create values of r and c
function GenerateTable() {

    var tblBody = document.createElement("tbody");
    for (var i = 0; i < irow.value; i++) {

        var row = document.createElement("tr");

        for (var j = 0; j < icol.value; j++) {
            var cell = document.createElement("td");
            row.appendChild(cell)
        }


        tblBody.appendChild(row);
    }
    var body = document.getElementsByTagName("body")[0];
    var tbl = document.createElement("table");
    tbl.appendChild(tblBody);
    body.appendChild(tbl);

}

//selector function
function SelectCell() {

    //grab value from the input x and y
    var tr = document.getElementsByTagName("tr");
    var td = document.getElementsByTagName("td");


    //insert the value of x and y into an array retriever

    var rowIndex = document.getElementById("valy").value;
    var cellIndex = document.getElementById("valx").value;
    //*********BREAKS DOWN HERE*******
    var change = document.getElementById("table").tr[rowIndex].td[cellIndex];

    change.style.backgroundColor = "red";
    //change color of specific coord            
}

＆＃13;

Answer 1

我不确定你可以像这样链接它：

var change = document.getElementById("table").tr[rowIndex].td[cellIndex];

我认为你想要的是：

//grab value from the input x and y
var rowIndex = +document.getElementById('valy').value;
var cellIndex = +document.getElementById('valx').value;

// Get reference to the table
var table = document.getElementById('table');
// Get the tr of the table with the index rowIndex
var tr = table.querySelectorAll('tr')[rowIndex];

// Query the selected row for all column elements and select the one at the needed index
var change = tr.querySelectorAll('td')[cellIndex];

注意：在尝试检索DOM元素之前，最好验证输入中的值，以确保在用户输入非整数值或超出范围的值时代码不会中断

Answer 2

因为我完成了它：

以下是一个工作示例

var irow = document.querySelector('#irow');
var icol = document.querySelector('#icol');
var smit1 = document.querySelector('#smit1');
var valx = document.querySelector('#valx');
var valy = document.querySelector('#valy');
var smit2 = document.querySelector('#smit2');

function GenerateTable() {
  var body = document.getElementsByTagName("body")[0];
  var tbl = document.createElement("table");
  var tblBody = document.createElement("tbody");

  for (var i = 0; i < irow.value; i++) {
    var row = document.createElement("tr");

    for (var j = 0; j < icol.value; j++) {
      var cell = document.createElement("td");

      row.appendChild(cell)
    }

    tblBody.appendChild(row);
  }

  tbl.setAttribute('class', 'generated');
  tbl.appendChild(tblBody);
  body.appendChild(tbl);
  smit1.disabled = true;
  irow.disabled = true;
  icol.disabled = true;
  smit2.disabled = false;
  valx.disabled = false;
  valy.disabled = false;
}

function SelectCell() {
  var tr = document.getElementsByTagName("tr");
  var td = document.getElementsByTagName("td");
  var rowIndex = valy.value;
  var cellIndex = valx.value;
  var change = document.querySelector('table.generated tbody').children[rowIndex].children[cellIndex];

  change.style.backgroundColor = "red";		
}

smit1.addEventListener('click', GenerateTable);
smit2.addEventListener('click', SelectCell);

table.generated td {
  width: 10px;
  height: 10px;
  border: 1px solid #000000;
}

.width100 {
  width: 100%;
}

<body>
  <div class="width100">
    <input type="number" id="irow" placeholder="rows">
    <input type="number" id="icol" placeholder="cols">
    <input type="submit" id="smit1">
  </div>
  <div class="width100">
    <input type="number" id="valx" disabled="true" placeholder="x">
    <input type="number" id="valy" disabled="true" placeholder="y">
    <input type="submit" id="smit2" disabled="true">
  </div>
</body>

创建一个为特定单元格着色的JS函数

2 个答案: