为什么不能更改文本行的颜色？将纯文本更改为 HTML<td>

Question

I'm trying to change the color of text lines containing "Accepted" to green and all others to red but when i upload my file all the lines are green.我正在尝试将包含“已接受”的文本行的颜色更改为绿色，将所有其他文本行的颜色更改为红色，但是当我上传文件时，所有行都是绿色的。 What am I doing wrong?我究竟做错了什么？ I really don't know why the else statement is not read.我真的不知道为什么没有读取 else 语句。

 document.getElementById("openFile").addEventListener("change", function(){ var file = this.files[0]; var fr = new FileReader(); fr.onload = function(){ document.getElementById("fileContents").textContent = this.result; let lines = document.getElementById("fileContents").textContent.split('\\n'); let parser =''; for(let line = 0; line < lines.length; line++){ if (lines[line].substring(0,3)==="ACK"){ parser += lines[line].substring(0,3) + "\\t" + lines[line].substring(49,108).trim() + "\\t" + lines[line].substring(109,115) + "\\t" + lines[line].substring(149,159).replace(/as/gi,"\\tAccepted").replace(/rj/gi,"\\tRejected") + '\\n'; } else if (lines[line].substring(0,3)==="MSG"){ parser += lines[line].substring(0,3) + "\\t" + lines[line].substring(35,159).replace(/,/,"").trim() + '\\n'; } } document.getElementById("fileContents").textContent = parser; if (parser.includes("Accepted")){ document.getElementById("fileContents").style.color = "#00FF00"; } else { document.getElementById("fileContents").style.color = "#FF0000"; } } fr.readAsText(file); },false)

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Parser</title> </head> <body> <input type="file" id="openFile"/> <br> <br> <br> <pre id="fileContents"></pre> <script src="js/app.js"></script> </body> </html>

After the suggestion of @aptriangle I tried to replace replace each line of text generated by an HTML element, in this case each substring should be a .在@aptriangle 的建议之后，我尝试替换由 HTML 元素生成的每一行文本，在这种情况下，每个子字符串都应该是 . I'm stuck on this and I can not make the necessary change.我被困在这个问题上，我无法做出必要的改变。 Can someone give me a help?有人可以帮我吗？ Thank you in advance.先感谢您。

 document.getElementById("openFile").addEventListener("change", function(){ var file = this.files[0]; var fr = new FileReader(); fr.onload = function(){ document.getElementById("fileContents").textContent = this.result; let lines = document.getElementById("fileContents").textContent.split('\\n'); let parser =''; for(let line = 0; line < lines.length; line++){ if (lines[line].substring(0,3)==="ACK"){ var sub1 = lines[line].substring(0,3) + '\\t'; var sub2 = lines[line].substring(49,108) + '\\t'; var sub3 = lines[line].substring(109,115) + '\\t'; var sub4 = lines[line].substring(149,lines.length).replace(/as/gi,"\\tAccepted").replace(/rj/gi,"\\tRejected").trim() + '\\n'; var tdata1,tdata2,tdata3,tdata4 = document.createElement("td"); tdata1.createTextNode(sub1); tdata2.createTextNode(sub2); tdata3.createTextNode(sub3); tdata4.createTextNode(sub4); parser += tdata1 + tdata2 + tdata3 + tdata4; var element = document.getElementById("fileContents"); element.appendChild(parser); } else if (lines[line].substring(0,3)==="MSG"){ var sub1 = lines[line].substring(0,3) + '\\t'; var sub2 = lines[line].substring(35,lines.length).replace(/,/,'').trim() + '\\n'; parser += sub1 + sub2; } } document.getElementById("fileContents").textContent = parser; } fr.readAsText(file); },false)

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>Parser</title> </head> <body> <input id="openFile" class="btn btn-light" type="file" /> <br> <br> <br> <div id="header" class="font-weight-bold"></div> <pre id="fileContents" class="font-weight-bold"></pre> <script src="js/app.js"></script> </body> </html>

I still can't put paragraphs when i upload the code...now what am i doing wrong?我上传代码时仍然无法放置段落...现在我做错了什么？ Sorry to bother but i really can't figure it out.抱歉打扰，但我真的想不通。

 document.getElementById("openFile").addEventListener("change", function(){ let file = this.files[0]; let fr = new FileReader(); fr.onload = function(){ let content = document.getElementById("fileContents"); content.textContent = this.result; let lines = content.textContent.split('\\n'); let parser = ''; let para; for(let line = 0; line < lines.length; line++){ para = document.createElement("p") para.innerHTML = lines[line]; if (lines[line].substring(0,3)==="ACK"){ let sub1 = lines[line].substring(0,3) + '\\t'; let sub2 = lines[line].substring(49,108) + '\\t'; let sub3 = lines[line].substring(109,115) + '\\t'; let sub4 = lines[line].substring(149,lines.length).replace(/as/gi,"\\tAccepted").replace(/rj/gi,"\\tRejected") + '\\n'; parser += sub1 + sub2 + sub3 + sub4; } else if (lines[line].substring(0,3)==="MSG"){ let sub1 = lines[line].substring(0,3) + '\\t'; let sub2 = lines[line].substring(35,lines.length).replace(/,/,'').trim() + '\\n'; parser += sub1 + sub2; } content.appendChild(para); } content.textContent = parser; } fr.readAsText(file); },false)

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>Parser</title> </head> <body> <input id="openFile" class="btn btn-light" type="file" /> <br> <br> <br> <pre id="fileContents" class="font-weight-bold"></pre> <script src="js/app.js"></script> </body> </html>

Answer 1

Here's a fiddle that shows a working split and style: https://jsfiddle.net/4qv3h0xp/这是一个显示工作拆分和样式的小提琴： https : //jsfiddle.net/4qv3h0xp/

var element;
for (var i = 0; i < split.length; i++) {
  element = document.createElement("p");
  element.innerHTML = split[i];
  if (split[i].indexOf("Accepted") == -1) {
    element.style.color = "#00FF00";
  }
  else {
    element.style.color = "#FF0000";
  }
  output.appendChild(element);
}

It creates a new element for every line and appends the elements to the parent, instead of styling the parent.它为每一行创建一个新元素并将元素附加到父元素，而不是为父元素设置样式。

为什么不能更改文本行的颜色？将纯文本更改为 HTML<td>

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-03-22 13:29:51

为什么不能更改文本行的颜色？ 将纯文本更改为 HTML<td>

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-03-22 13:29:51

为什么不能更改文本行的颜色？将纯文本更改为 HTML<td>

解决方案1
0 已采纳 2019-03-22 13:29:51