动态添加表格行时如何更改td.style

Question

I use JavaScript to add table rows dynamically, but I don't know how to change the style of the table data. My code is:

var tableis = document.getElementById("cameraTable");
var last=(-1);
var Tr = tableis.insertRow(last);
var Td1 = Tr.insertCell(0);
Td1.innerHTML="<div name='mac"+i+"' id='mac"+i+"'>"+mac+"</div>";
Tr.appendChild(Td1);

and I only know how to change the background of the td:

Td1.bgColor="#00FF00";

I want to change the border style of the td, is it possible? The style is like:

style="border: 1px solid black;"

I have tried Td1.style="border: 1px solid black;" but it is no effort.

Any answer appreciated.

Answer 1

You can do this using the HTMLElement.style :

Td1.style.border = '1px solid black';

Simple Demo Here

Answer 2

I think a more elegant solution would be to have the CSS class defined rather than hard-coding the style in the cell.

/* CSS Class */
.cellStyle{
     border: 1px solid black;
     background-color: #00FF00;
}

/* JavaScript Code */
Td1.className = 'cellStyle';