Question

我想在JS中创建一个脚本，根据提供的CSV数据的数值生成颜色框。到目前为止，我只是设法将数据传递到HTML表格中，我正在寻找两件事情;

根据插入的数字更改<td>的rgb背景颜色（例如，值128表示rgb（128,0,0））
将单元格内容留空，但仍会创建新的<td>元素。

这是我的剧本;

＆＃13;

<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>

＆＃13;

Answer 1

这应该可以解决问题：

<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>

Answer 2

假设lines包含数字，

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

在HTML表格单元格中添加背景颜色

2 个答案: