我正在尝试使用javascript更改表单元格的属性，并且找到了我的建议，但似乎无法使它们正常工作

Question

I have a table where each row has 7 input columns. I want to disable the 3rd column of each row and change the text color to red.

function changeCells() {
  var table = document.getElementById("tbl");
  for (var i = 0; i < table.rows.length; i++) {
    var tr = table.getElementsByTagName("tr")[i];
    var td = tr.getElementsByTagName("td")[2];
    td.style.color = 'red';
    td.disabled = true;
  }
}

I can change the background with:

td.style.backgroundColor = 'red';

but not the text color.

The input column is also not disabled. Not sure why this code doesn't work.

Answer 1

Without seeing the rest of the CSS and HTML, it's difficult to tell, but it sounds like you have other CSS setting the text color (assuming the background color changes works as you described). You can add the !important modifier via Javascript to test this for certain:

td.style.setProperty("color", "red", "important");

If it takes that, then something else wasn't letting you change the color. Ideally, you would instead add a class to the <td> element, and then you can control what it looks like via pure CSS.

In JS:

td.className = 'highlight-cell';

Then in CSS:

.highlight-cell {
    color: red !important;
}

Answer 2

A td element cannot be disabled. You need to target the input element within it. Here is a working example of what you want: https://jsfiddle.net/0xk99dxr/

And the relevant code being added:

var inputElement = td.querySelector("input");
    inputElement.style.color = 'red';
    inputElement.disabled = true; 

Answer 3

To change the text color inside every row of third column, use the following line of code in css file.

#tbl tr td:nth-child(3){color: red}

Table cells don't have a disabled property.