CODEWITHSUNDEEP
htmlcssstyling
iuuujkl
iuuujkl

Reputation: 2394

Styling table created with javascript

I want to style my table I created with javascript like:

var table = document.createElement('TABLE');
  var thead = document.createElement('THEAD');
  table.appendChild(thead);
  var trhead = document.createElement('TR');
  thead.appendChild(trhead);
var headers = new Array("Date", "Event", "Artist");
  for (var x = 0; x < 3; x++) {
      var tdhead = document.createElement('TD');
      bold = document.createElement('strong'),
      textnode = document.createTextNode(headers[x]);
      bold.appendChild(textnode);
      tdhead.appendChild(bold);
      tdhead.style.color = "#212529";
      tdhead.style.fontWeight="bold";
      trhead.appendChild(tdhead);
  }
  var tableBody = document.createElement('TBODY');
  table.appendChild(tableBody);



  for (i=0;i<total;i++) {
    var tr = document.createElement('TR');
    tableBody.appendChild(tr);
    var dategig = json.data[i].date.value;
    var dategig = dategig.split('T')[0];
    var artist = json.data[i].artist.name
    var event = json.data[i].eventName
    var arr = new Array(dategig, event, artist);
    for (var j = 0; j < 3; j++) {
      var td = document.createElement('TD');
      textnode = document.createTextNode(arr[j]);
      td.appendChild(textnode);
      td.style.color = "#212529";
      tr.appendChild(td);
    }
  }
  myTableDiv.appendChild(table);

As you can see I already can assign a color to the cells. Now I want to add a border-bottom to the TR element:

tr.style.border= "1pt";

But that doesn't change anything on the table.. also "border-bottom" is not recognized as an style attribute, why?

Upvotes: 2

Views: 309

Answers (2)

A. Meshu
A. Meshu

Reputation: 4148

As @thingEvery say, tr doesn't have border by default, BUT you can sort of hack it with linear-gradient background. Example:

table {border-collapse: collapse;}
tr {background-image: linear-gradient(white 0px, white 16px, black 16px, black 100%);}
<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

Upvotes: 0

thingEvery
thingEvery

Reputation: 3434

tr doesn't have a border property. Apply it to the td instead.

CSS:

td { border-bottom: 1px solid black; }

JS:

var td = document.getElementsByTagName("td");
var tdCount = document.getElementsByTagName("td").length;
for (var i=0; i<tdCount; i++) {
    td[i].style.borderBottom = "2px solid orange";
}

jQuery: $('td').css('borderBottom', '2px solid blue');

Upvotes: 1

Related Questions