Почему я не могу изменить цвет текстовых строк? Изменить простой текст в HTML <td> - PullRequest
Новая
       1

Почему я не могу изменить цвет текстовых строк? Изменить простой текст в HTML <td>

0 голосов
/ 21 марта 2019

Я пытаюсь изменить цвет текстовых строк, содержащих «Принятый», на зеленый, а все остальные на красный, но когда я загружаю свой файл, все строки становятся зелеными. Что я делаю неправильно? Я действительно не знаю, почему утверждение else не читается.

enter image description here

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>

  
    
    
    Parser

После предложения @aptriangle я попытался заменить заменить каждую строку текста, сгенерированного элементом HTML, в этом случае каждая подстрока должна быть a. Я застрял на этом и не могу внести необходимые изменения. Может ли кто-нибудь помочь мне? Заранее спасибо. 

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>

  
    
    
    
    Parser
  
  
    
    

    

    

    


     
  







 Я все еще не могу поставить абзацы, когда загружаю код ... что я делаю не так? Извините, что беспокою, но я действительно не могу понять это. 



 




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>

  
    
    
    
    Parser
  
  
    
    

    

    

    


     
  


















 



 

 





 




 





1 Ответ












0 голосов 























 / 

22 марта 2019












 Вот скрипка, которая показывает рабочий сплит и стиль: 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);
}




 Создает новый элемент для каждой строки и добавляет элементы к родительскому элементу вместо стилизации родительского элемента. 







 
 

 





 

 



 




















Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

 








Нет похожих вопросов



    









 

 

 


...