Member Avatar for xuexue

hi, how could i change the color of the cell in a table using this code??

<script language="javascript">
function addRow(tableID) 
{ 
	var table = document.getElementById(tableID); 
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);   
	
	var cella = row.insertCell(0);
	var element1 = document.createElement("input");
	element1.type = "text";
	element1.name = "txtManufacturer[]";
	element1.size = "10";
	cella.appendChild(element1);	
}
</script>
  • 2 Contributors
  • 1 Reply
  • 99 Views
  • 4 Weeks Discussion Span
  • Latest Post Latest Post by codewall

Dani AI

Generated

asked how to color a cell when adding a row. 's inline-style hint is a quick fix, but a more maintainable and accessible approach is to use CSS classes and toggle them from JavaScript. That keeps styling in the stylesheet, makes theme changes easy, and is faster when many cells change.

Example approach (put the CSS in your stylesheet and add the class from JS):

/* stylesheet */
.added-cell { background-color: #ffefef; color: #222; }
.added-row td { background-color: #f7f7d9; }
.input-highlight { background-color: #fff9c4; }
// after creating the cell or row
if (cell.classList) {
  cell.classList.add('added-cell');
} else {
  cell.className += ' added-cell'; // fallback for very old browsers
}

Rather than styling a single TD, consider adding a class to the TR (tr.classList.add('added-row')) to affect every cell in that row with one rule. If the visual change should follow focus, add the class to the input instead (input.classList.add('input-highlight')). Using classes also makes it easy to remove or toggle the style later.

Troubleshooting notes: ensure the stylesheet is loaded before the script runs or add classes after DOM creation; if your table uses a THEAD/TBODY, insert rows into the correct tbody; verify color contrast for accessibility. For details on classList usage, see the documentation at Element.classList.

Member Avatar for codewall

maybe this help

<script language="javascript">
function addRow(tableID) 
{ 
	var table = document.getElementById(tableID); 
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);   
 
	var cella = row.insertCell(0);
        cella.style.backgroundColor='#FF0000';
	var element1 = document.createElement("input");
	element1.type = "text";
	element1.name = "txtManufacturer[]";
	element1.size = "10";
	cella.appendChild(element1);	
}
</script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.