Styling table created with javascript

Question

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?

There is not any jquery in use here? The javascript property equivalent is borderBottom and not border-bottom. See this info — Paul T.
– Paul T., Commented Dec 28, 2019 at 15:41

thingEvery · Accepted Answer · 2019-12-28 16:15:42Z

1

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');

answered Dec 28, 2019 at 16:15

thingEvery

3,3691 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A. Meshu · Accepted Answer · 2019-12-28 23:27:06Z

0

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>

answered Dec 28, 2019 at 23:27

A. Meshu

4,1782 gold badges24 silver badges35 bronze badges

Collectives™ on Stack Overflow

Styling table created with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related