javascript - Adding class to specific cells of a html table - Stack Overflow

admin管理员组

文章数量:1287595

I am working on automating some reports for my pany. We use R to summarize data in Excel, then use a bination of Rmarkdown, knitr, and the package "htmlTable" to create HTML.

I am currently using a CSS to modify some parts of the HTML code

markdownToHTML(paste0(basePath,'makeAppendixTableD1.md'),
             "appendixTableD1.html",
             stylesheet = paste0(basePath,"testStyleSheetUpdated.css")) 

where the HTML code output from above looks like:

<table class='gmisc_table' style='border-collapse: collapse; margin-top: 1em; margin-bottom: 1em;' >
<tbody>
<tr>
<td style='text-align: center;'>X1</td>
<td style='text-align: center;'>0</td>
</tr>
<tr>
<td style='text-align: center;'>X2</td>
<td style='text-align: center;'>0.35</td>
</tr>
<tr>
<td style='text-align: center;'>X3</td>
<td style='text-align: center;'>0.31</td>
</tr>
</tbody>
</table>

I can easily change the attributes like font-size or font-family using the CSS; however, I am a bit stumped for how to best edit specific columns or rows.

For example, I'd like to make X2 to be bold and italicized. But I won't always know where X2 is in the table. So I can't put in the CSS to modify the second row, first cell as for another table X2 may be the 10th row, first cell.

EDIT: Ideally, I'd like to be able to edit the whole <tr> </tr> for when X2 exists in the HTML.

Currently, I can use gsub() and some other string functions to find X2 in the HTML, then go back a couple characters to insert class = "X2". But this involves a fair bit of hardcoding.

Is there an easier way to do this using javaScript? I've looked into using the xtable package in R. There doesn't seem to be a way to add classes using the htmlTable package in R.

I am working on automating some reports for my pany. We use R to summarize data in Excel, then use a bination of Rmarkdown, knitr, and the package "htmlTable" to create HTML.

I am currently using a CSS to modify some parts of the HTML code

markdownToHTML(paste0(basePath,'makeAppendixTableD1.md'),
             "appendixTableD1.html",
             stylesheet = paste0(basePath,"testStyleSheetUpdated.css")) 

where the HTML code output from above looks like:

<table class='gmisc_table' style='border-collapse: collapse; margin-top: 1em; margin-bottom: 1em;' >
<tbody>
<tr>
<td style='text-align: center;'>X1</td>
<td style='text-align: center;'>0</td>
</tr>
<tr>
<td style='text-align: center;'>X2</td>
<td style='text-align: center;'>0.35</td>
</tr>
<tr>
<td style='text-align: center;'>X3</td>
<td style='text-align: center;'>0.31</td>
</tr>
</tbody>
</table>

I can easily change the attributes like font-size or font-family using the CSS; however, I am a bit stumped for how to best edit specific columns or rows.

For example, I'd like to make X2 to be bold and italicized. But I won't always know where X2 is in the table. So I can't put in the CSS to modify the second row, first cell as for another table X2 may be the 10th row, first cell.

EDIT: Ideally, I'd like to be able to edit the whole <tr> </tr> for when X2 exists in the HTML.

Currently, I can use gsub() and some other string functions to find X2 in the HTML, then go back a couple characters to insert class = "X2". But this involves a fair bit of hardcoding.

Is there an easier way to do this using javaScript? I've looked into using the xtable package in R. There doesn't seem to be a way to add classes using the htmlTable package in R.

• javascript
• html
• r
• html-table

Share Improve this question Follow edited Apr 5, 2016 at 7:46 Mr Lister 46.6k1515 gold badges113113 silver badges155155 bronze badges asked Mar 30, 2016 at 15:47 John LombardiJohn Lombardi 17133 gold badges33 silver badges1010 bronze badges 6

• 1 Can you use jQuery? It would be fairly easy to check the contents of a <td> with jQuery and then add a class accordingly. – Coleman Commented Mar 30, 2016 at 15:51
• I've thought about using jQuery, but the software I'm developing will be used be on other machines and not necessarily by me. I know you have to install a .js file on the puter that is using the jQuery code - not sure the best way to implement using jQuery at my work at the moment. – John Lombardi Commented Mar 30, 2016 at 16:11
• 1 why can't you just match the text and put whatever tags around it? for example htmlTable(mtcars); x <- 4;; mtcars[mtcars == x] <- sprintf('<strong><em>%d</em></strong>', x); htmlTable(mtcars) – rawr Commented Mar 30, 2016 at 16:21
• @rawr That is a good idea for modifying cells - but I should have added to the original post that I'd like to edit the whole <tr> </tr>. For example, if we use your code: x <- 'Volvo 142E'; mtcars[mtcars == x] <- sprintf('<strong><em>%d</em></strong>', x) but instead have all rows have the same '<strong><em>%d</em></strong>' property for that Volvo 142E row. I'm editing the original post now. – John Lombardi Commented Mar 30, 2016 at 16:29
• 1 so that would be just x <- 'Volvo 142E'; mtcars[x, ] <- sapply(mtcars[x, ], function(xx) sprintf('<strong><em>%s</em></strong>', xx)); htmlTable(mtcars) I only pass matrices to htmltable, it makes formatting much easier and more consistent – rawr Commented Mar 30, 2016 at 16:34

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 7

With vanilla JS, you could do something like:

//grab all td elements in your table
var tds = document.querySelectorAll(".gmisc_table td");
//iterate over each td
for (var i = 0; i < tds.length; i++) {
  var text = tds[i].innerText;
  //check for your target text
  if (text === "X2") {
    //add your class to the element containing this text
    tds[i].classList.add("X2");
  }
}

Pure JS:

Array.prototype.slice.call( document.getElementsByTagName("td"), 0 )
  .filter(function(x) {return x.innerHTML.match(/X2/)})
  .forEach(function(x) {
             x.classList.add('X2')                          // <td>
             x.parentNode.classList.add('OtherClassName')   // <tr>
  })

The last x is the DOM representation of the <td>, so you can navigate from there wherever you like, as the last line does with x.parentNode which is the <tr>...

jQuery on the first line only:

$.makeArray($("td"))
  .filter(function(x) {return x.innerHTML.match(/X2/)})
  .forEach(function(x) {x.classList.add('X2')})

ES6 with jQuery (won't work in IE11 due to no support for => yet):

$.makeArray($("td"))
  .filter(x => x.innerHTML.match(/X2/))
  .forEach(x => x.classList.add('X2'))

You would change line two to filter for an exact match if you so desired:

.filter(function(x) {return x.innerHTML === 'X2'})

var table = document.getElementsByTagName('table')[0];


var cols = table.getElementsByTagName('td');

for (var i = 0; i < cols.length; i++) {
  
  var col = cols[i];
  
  var content = col.innerText;
  
  // If it starts with 'X':
  if (content[0] === 'X') {
    col.className = content;
  }
}

.X1 { color: red; }
.X2 { color: blue; }

<table class='gmisc_table' style='border-collapse: collapse; margin-top: 1em; margin-bottom: 1em;' >
<tbody>
<tr>
<td style='text-align: center;'>X1</td>
<td style='text-align: center;'>0</td>
</tr>
<tr>
<td style='text-align: center;'>X2</td>
<td style='text-align: center;'>0.35</td>
</tr>
<tr>
<td style='text-align: center;'>X3</td>
<td style='text-align: center;'>0.31</td>
</tr>
</tbody>
</table>

本文标签： javascriptAdding class to specific cells of a html tableStack Overflow