Changing the CSS property of a single table cell's innerHTML

Question

Changing the CSS property of a single table cell's innerHTML

I have a question that may seem silly, but I'm going to ask it anyway.

Currently, I am iterating through a list of strings that follow the format "1H 20MIN" and adding them to table cells using the innerHTML property like so:

for (i = 0; i < list.length; i++) { 
    myTable.rows[1].cells[i].innerHTML = list[i];   
}

My intention is to display the numbers (in this case 1 and 20) in one font style and the text (H and MIN) in a different font style.

Is there a way to achieve this, or do you have any suggestions on how to restructure my code/table to make it possible?

Thank you!

javascript html css

Answer 1

Answer №1

Separate the numbers and non-numbers using span elements with appropriate class names, then customize their appearance using CSS.

For example, you can put the digits into spans like this:

myTable.rows[1].cells[i].innerHTML = list[i].replace(/\d+/g, "<span class=num>$&</span>");

...and then apply styles to .num.

Here's an illustration:

var str = "1H 20MIN";
document.getElementById("ex").innerHTML = str.replace(/\d+/g, "<span class=num>$&</span>");

div {
  font-family: sans-serif;
  color: green;
}
.num {
  font-family: serif;
  color: blue;
}

<div id="ex"></div>

Answer 2

Separate the numbers and non-numbers using span elements with appropriate class names, then customize their appearance using CSS.

For example, you can put the digits into spans like this:

myTable.rows[1].cells[i].innerHTML = list[i].replace(/\d+/g, "<span class=num>$&</span>");

...and then apply styles to .num.

Here's an illustration:

var str = "1H 20MIN";
document.getElementById("ex").innerHTML = str.replace(/\d+/g, "<span class=num>$&</span>");

div {
  font-family: sans-serif;
  color: green;
}
.num {
  font-family: serif;
  color: blue;
}

<div id="ex"></div>

Answer 3

Answer №2

To start, one can utilize a programmatic approach to detect the numeric character groups and then appropriately generate spans:

var exampleString = '1H 20MIN';
var spanGroupsArray = [];
var htmlString = '';

function extractSpanGroups(inputString) {
  var groupsArray = [];
  var workingGroup = {
    isNumeric: false,
    items: []
  }

  inputString.split('').forEach(function(letter) {
    processCharacter(letter, workingGroup, groupsArray);
  });

  groupsArray.push({
    text: workingGroup.items.join(''),
    isNumeric: workingGroup.isNumeric
  });

  groupsArray.splice(0, 1); //remove the first empty item;

  return groupsArray;
}

function processCharacter(letter, workingGroup, groupsArray) {
  if (workingGroup.isNumeric === isNumeric(letter)) { 
    workingGroup.items.push(letter);
  } else { 
    groupsArray.push({
      text: workingGroup.items.join(''),
      isNumeric: workingGroup.isNumeric
    });

    workingGroup.isNumeric = isNumeric(letter);
    workingGroup.items = [letter];
  }
}

function isNumeric(letter) {
  return !isNaN(parseFloat(letter)) && isFinite(letter);
}

function convertToHtml(groupsArray) {
  var htmlOutput = '';

  groupsArray.forEach(function(group) {
    if (group.isNumeric) {
      htmlOutput += '<span class="mathy">' + group.text + '</span>'
    } else {
      htmlOutput += '<span class="charactery">' + group.text + '</span>'
    }
  });

  return htmlOutput;
}

spanGroupsArray = extractSpanGroups(exampleString);
htmlString = convertToHtml(spanGroupsArray);
document.getElementById('container').innerHTML = htmlString;

/* #christmas */

.mathy {
  color: red;
}

.charactery {
  color: green;
}

<div id="container">
  <!-- pretend this is a row or cell or w/e -->
</div>

Answer 4

To start, one can utilize a programmatic approach to detect the numeric character groups and then appropriately generate spans:

var exampleString = '1H 20MIN';
var spanGroupsArray = [];
var htmlString = '';

function extractSpanGroups(inputString) {
  var groupsArray = [];
  var workingGroup = {
    isNumeric: false,
    items: []
  }

  inputString.split('').forEach(function(letter) {
    processCharacter(letter, workingGroup, groupsArray);
  });

  groupsArray.push({
    text: workingGroup.items.join(''),
    isNumeric: workingGroup.isNumeric
  });

  groupsArray.splice(0, 1); //remove the first empty item;

  return groupsArray;
}

function processCharacter(letter, workingGroup, groupsArray) {
  if (workingGroup.isNumeric === isNumeric(letter)) { 
    workingGroup.items.push(letter);
  } else { 
    groupsArray.push({
      text: workingGroup.items.join(''),
      isNumeric: workingGroup.isNumeric
    });

    workingGroup.isNumeric = isNumeric(letter);
    workingGroup.items = [letter];
  }
}

function isNumeric(letter) {
  return !isNaN(parseFloat(letter)) && isFinite(letter);
}

function convertToHtml(groupsArray) {
  var htmlOutput = '';

  groupsArray.forEach(function(group) {
    if (group.isNumeric) {
      htmlOutput += '<span class="mathy">' + group.text + '</span>'
    } else {
      htmlOutput += '<span class="charactery">' + group.text + '</span>'
    }
  });

  return htmlOutput;
}

spanGroupsArray = extractSpanGroups(exampleString);
htmlString = convertToHtml(spanGroupsArray);
document.getElementById('container').innerHTML = htmlString;

/* #christmas */

.mathy {
  color: red;
}

.charactery {
  color: green;
}

<div id="container">
  <!-- pretend this is a row or cell or w/e -->
</div>

Answer 5

Answer №3

To enhance the code, you can modify it to display numbers and letters in separate spans with customized classes.

I will provide a code illustration later as I am currently on my mobile device. Nevertheless, the result would appear similar to this:

<span class='time'>1<span class='letters'>HR</span> 20<span class='letters'>MIN</span> </span>

Answer 6

To enhance the code, you can modify it to display numbers and letters in separate spans with customized classes.

I will provide a code illustration later as I am currently on my mobile device. Nevertheless, the result would appear similar to this:

<span class='time'>1<span class='letters'>HR</span> 20<span class='letters'>MIN</span> </span>

Changing the CSS property of a single table cell's innerHTML

Answer №1

Answer №2

Answer №3

Similar questions

Managing the closest element depending on the selected option in Angular 5

Troubleshooting a VueJS Problem: Updating $data in the mounted hook

Tips for creating a stylish scrollbar in a React Material-Table interface

Is using async/await with setState() in React.js the best approach for handling asynchronous operations?

The daily scripture quote from the ourmanna.com API may occasionally fail to appear

Explore the comparison feature with jQuery's combobox

Utilizing Tailwind CSS for creating a responsive layout on a Next.js application

Changing the position of an image can vary across different devices when using HTML5 Canvas

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

CSS - starting fresh with animations

Using jest.fn() to simulate fetch calls in React

The Ajax form's malfunction is attributed to JSON, as it throws a parser error indicating a SyntaxError. Specifically, the JSON.parse function encounters an unexpected end of data at line 1, column 1

Every iteration and vertical lines

Vue.js2 - Detection of Observer in Array

What is the best way to insert a React component or raw HTML into another React component?

Is it a bad idea to incorporate JavaScript functions into AngularJS directives?

What is the best way to incorporate a minimum width and maximum width in CSS that add up to 100% when necessary?

Guide to building a straightforward line graph using JSON data from a server

What is the proper way to address the error message regarding requestAnimationFrame exceeding the permitted time limit?

What is the best way to utilize RxJs for streaming HostListener events?