Appending background color in HTML table cells

Question

I want to create a script in JS that produces color boxes according to the numerical value of the CSV data provided. So far, I have only managed to pass the data into an HTML table and I'm looking for two things;

Change the rgb background-color of <td>s according to the number inserted (eg. a value of 128 gives rgb(128,0,0))
Leave the cell content blank but still create a new <td> element.

Here's my script;

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body >
  <div>
    <form class="form-horizontal well">
      <fieldset>
          <label for="csvFileInput"> <strong>CSV File:</strong>
          </label>
          <input type="file" id="csvFileInput" onchange="handleFiles(this.files)"
          accept=".csv">
        </div>
      </fieldset>
    </form>
    <div id="output">
    </div>
  </div>
 
  <footer>
  </footer>
  <script type="text/javascript" >
  function handleFiles(files) {
	if (window.FileReader) {
		getAsText(files[0]);
	} else {
		alert('FileReader are not supported in this browser.');
	}
}

function getAsText(fileToRead) {
	var reader = new FileReader();
	reader.onload = loadHandler;
	reader.onerror = errorHandler;
	reader.readAsText(fileToRead);
}

function loadHandler(event) {
	var csv = event.target.result;
	processData(csv);             
}

function processData(csv) {
    var allTextLines = csv.split(/\r\n|\n/);
    var lines = [];
    while (allTextLines.length) {
        lines.push(allTextLines.shift().split(','));
    }
	document.getElementById("output").innerHTML = (lines);
	drawOutput(lines);
}

function errorHandler(evt) {
	if(evt.target.error.name == "NotReadableError") {
		alert("Canno't read file !");
	}
}

function drawOutput(lines){
	document.getElementById("output").innerHTML = "";
	var table = document.createElement("table");
	for (var i = 0; i < lines.length; i++) {
		var row = table.insertRow(-1);
		for (var j = 0; j < lines[i].length; j++) {
			var firstNameCell = row.insertCell(-1);
			firstNameCell.appendChild(document.createTextNode(lines[i][j]));
		}
	}
	document.getElementById("output").appendChild(table);
}
</script>
</body>
</html>

What are the possible values of colours you are looking at? What if the value is greater than 255 or how do you determine if you'd want a colour other than Red (since one number would change only one part of the RGB)? — Slartibartfast
– Slartibartfast, Commented Dec 29, 2015 at 9:32
My values are between 0 and 255 and for the time being, I'm only interested in the shades of red. — civy
– civy, Commented Dec 29, 2015 at 9:37

Axel Amthor · Accepted Answer · 2015-12-29 09:44:48Z

0

This should do the trick:

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body >
  <div>
    <form class="form-horizontal well">
      <fieldset>
          <label for="csvFileInput"> <strong>CSV File:</strong>
          </label>
          <input type="file" id="csvFileInput" onchange="handleFiles(this.files)"
          accept=".csv">
        </div>
      </fieldset>
    </form>
    <div id="output">
    </div>
  </div>
 
  <footer>
  </footer>
  <script type="text/javascript" >
  function handleFiles(files) {
	if (window.FileReader) {
		getAsText(files[0]);
	} else {
		alert('FileReader are not supported in this browser.');
	}
}

function getAsText(fileToRead) {
	var reader = new FileReader();
	reader.onload = loadHandler;
	reader.onerror = errorHandler;
	reader.readAsText(fileToRead);
}

function loadHandler(event) {
	var csv = event.target.result;
	processData(csv);             
}

function processData(csv) {
    var allTextLines = csv.split(/\r\n|\n/);
    var lines = [];
    while (allTextLines.length) {
        lines.push(allTextLines.shift().split(','));
    }
	document.getElementById("output").innerHTML = (lines);
	drawOutput(lines);
}

function errorHandler(evt) {
	if(evt.target.error.name == "NotReadableError") {
		alert("Canno't read file !");
	}
}

function drawOutput(lines){
	document.getElementById("output").innerHTML = "";
	var table = document.createElement("table");
	for (var i = 0; i < lines.length; i++) {
		var row = table.insertRow(-1);
		for (var j = 0; j < lines[i].length; j++) {
			var firstNameCell = row.insertCell(-1);
			firstNameCell.appendChild(document.createTextNode(lines[i][j]));

            firstNameCell.style.backgroundColor = "rgb(" + lines[i][j] + ",0,0)"
		}
	}
	document.getElementById("output").appendChild(table);
}
</script>
</body>
</html>

answered Dec 29, 2015 at 9:44

Axel Amthor

11.1k1 gold badge28 silver badges45 bronze badges

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

2 Comments

civy Over a year ago

Awesome!. Another thing; if I set a custom value above your correction like lines[i][j] = 255 an extra cell appears on the last line. Can you check it ?

Axel Amthor Over a year ago

No, just tried, doesn't add an extra cell. Probably there's an extra \n on the last line (or extra but empty row)?

Slartibartfast · Accepted Answer · 2015-12-29 10:11:42Z

0

Assuming lines contains the number,

var firstNameCell = row.insertCell(-1);
firstNameCell.setAttribute('bgcolor', 'rgb('+lines[i][j]+',0,0)');
firstNameCell.appendChild(document.createTextNode(lines[i][j]));

answered Dec 29, 2015 at 10:11

Slartibartfast

1,6134 gold badges25 silver badges38 bronze badges

1 Comment

civy Over a year ago

The code seems fine, but for some reason I get results in green

Collectives™ on Stack Overflow

Appending background color in HTML table cells

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related