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

What is the process of exporting a module that has been imported in ES6?

Generating alternate list items

How can global variables be effectively shared and edited between two separate runs of JavaScript nodes?

issue in jquery: ajax promise not returning any value

Upon including the enctype attribute as "multipart/form-data" in my form and submitting it, the form redirects to a different page

CSS equal-width table columns

When is it necessary to use JSON.parse(JSON.stringify()) with a Buffer object?

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

Vuetify: Utilizing condition-based breakpoints

What is the best way to utilize date-fns for formatting a date retrieved from an API?

"What is the best way to retrieve the id of the element that triggered a JavaScript onclick

Error encountered: The JSONP request to https://admin.typeform.com/app/embed/ID?jsoncallback=? was unsuccessful

Encountering an issue while attempting to implement Redux Toolkit alongside the MUI ToggleButtonGroup component

Issue with Material-UI tab when using a datatable within it's content

The issue of transform scale not functioning properly in conjunction with background clip and gradients in CSS

When the Bootstrap navbar is collapsed, clicking on it does not result in it opening

Error found in Twitter Bootstrap popover plugin: `this.isHTML` function is missing

Tips for effectively implementing a custom theme alongside a component library that utilizes Material UI without the need to apply it to every single component

steps for marking comments as read or unread by multiple users

Leveraging Async / Awaits with Promise