从本地目录读取文件并更改HTML表行的颜色

Question

In the below code, I am selecting file(say result.txt) using browse button from the local disk and reading it and displaying the contents on my HTML page. 在下面的代码中，我使用本地磁盘上的浏览按钮选择文件（例如result.txt），然后读取它并在HTML页面上显示内容。 Also I have iterated the value to read the 1-5 lines of the file . 另外，我已经迭代了该值以读取文件的1-5行 。

I have one table with 2 rows machine1 and machine2. 我有一张带有2行machine1和machine2的表。

In the file I selected there is a variable present in the content say :- 在我选择的文件中，内容中存在一个变量：-

machine1 = machine1 is up or machine 1 is down. MACHINE1 = MACHINE1是向上或机器1 停机。

machine2 = machine2 is up or machine 2 is down . machine2 =机器2已启动或机器2已关闭。

Can anyone suggest me how can I add a condition in my below code so that it can read this value up and down from the result.txt file content and change the color of the respective rows as red(for down) and green(for up) ? 谁能建议我如何在下面的代码中添加条件，以便它可以从result.txt文件内容上下读取该值，并将相应行的颜色更改为红色（向下）和绿色（向上）） ？

PS: Please copy my present code in a .txt file(say test.txt) and save it as test.html and open in IE or Firefox. 附言：请把我现在的代码复制到一个.txt文件中（例如test.txt），并将其另存为test.html，然后在IE或Firefox中打开。

MY CODE : 我的密码：

<!DOCTYPE html>
<html>
<body>

<table border="1" width="30%">
<tr>
  <td>machine1</td>

</tr>
<tr>
  <td>machine2</td>

</tr>

</table>

</body>
</html>
<hr size="2">
<style>
  #byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }
</style>

<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
    <button>Complete file</button>
    <button data-startbyte="0" data-endbyte="4">1-5</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>

<script>
  function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById('byte_content').textContent = evt.target.result;
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
  }

  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);
</script>

RESULT.TXT 的Result.txt

Service1 =  replication job is working fine
Service2 = replaication job is working fine

machine1 = machine1 is up or machine 1 is down.

machine2 = machine2 is up or machine 2 is down.

Answer 1

Try 尝试

Structure relevant data at results.txt as json string, eg, beginning file with 在results.txt中将相关数据作为json字符串进行结构化，例如，以

{"Service1":"Replication job is working fine","Service2":"Replication job is working fine","machine1":"up","machine2":"down"}

- without spaces - should be first 123 to 127 bytes of results.txt , depending on "up" or "down" properties. -没有空格-应先将123至127字节的results.txt ，这取决于"up"或"down"的属性。 Alternatively, could place data into distinct file, so as not to have to calculate where json string ends within file; 或者，可以将数据放入不同的文件中，从而不必计算json字符串在文件中的结尾； entire file could be json object to be processed, irrespective of blob.size , or length of json string. 整个文件可以是要处理的json object ，与blob.size或json字符串的length blob.size 。

Then can process data as json , or object , ieg, 然后可以将数据处理为json或object ，即

html HTML

<!-- data-* attribute utilized as `file`, or `results.txt` at jsfiddle -->
<data data-status='{"Service1":"Replication job is working fine","Service2":"Replication job is working fine","machine1":"up","machine2":"down"}'>machine data</data>
<br />
<table border="1" width="30%">
    <tr id="machine1">
        <td>machine1</td>
    </tr>
    <tr id="machine2">
        <td>machine2</td>
    </tr>
</table>

js JS

$(function () {
    var blob = new Blob([$("data")[0].dataset.status], {
        "type": "application/json"
    });
    console.log(blob.size);
    var reader = new FileReader();
    reader.onload = function (e) {
        if (e.target.readyState === FileReader.DONE) {
            var status = $.extend({}, JSON.parse(e.target.result));

            if (status.machine1 === "up") {
                $("#machine1").css("color", "green")
            } else {
                $("#machine1").css("color", "red")
            };

            if (status.machine2 === "up") {
                $("#machine2").css("color", "green")
            } else {
                $("#machine2").css("color", "red")
            };

        };
    };
    reader.readAsText(blob);
});

jsfiddle http://jsfiddle.net/guest271314/8Pzp8/ jsfiddle http://jsfiddle.net/guest271314/8Pzp8/

Edit 编辑

fwiw, utilizing json formatted string (data structure), could achieve same result with $.getJSON() fwiw利用json格式的字符串（数据结构），可以通过$.getJSON()获得相同的结果

machines.json : machines.json ：

                     { 
                      "Service1" : "Replication job is working fine",
                      "Service2" : "Replication job is working fine",
                      "machine1" : "up",
                      "machine2" : "down"
                     }

js JS

$.getJSON("machines.json", function(json, textStatus, jqxhr) {
              if (textStatus === "success" && jqxhr.responseJSON) {
                if (json.machine1 === "up") {
                    $("#machine1").css("color", "green")
                } else {
                    $("#machine1").css("color", "red")
                };

                if (json.machine2 === "up") {
                    $("#machine2").css("color", "green")
                } else {
                    $("#machine2").css("color", "red")
                };
              };
});

jsfiddle http://jsfiddle.net/guest271314/4uN2y/ jsfiddle http://jsfiddle.net/guest271314/4uN2y/

从本地目录读取文件并更改HTML表行的颜色

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-07-04 16:40:11

从本地目录读取文件并更改HTML表行的颜色

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-07-04 16:40:11

解决方案1
0 已采纳 2014-07-04 16:40:11