个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 08:08:14 25 4
gpt4 key购买 nike

在下面的代码中，我使用浏览按钮从本地磁盘选择文件(例如 result.txt)并读取它并在我的 HTML 页面上显示内容。此外，我还迭代了读取文件1-5行的值。

我有一个包含 2 行 machine1 和 machine2 的表。

在我选择的文件中，内容中存在一个变量:-

机器 1 = 机器 1 处于运行状态或机器 1 处于关闭状态。

机器2 = 机器2运行或机器2宕机。

任何人都可以建议我如何在下面的代码中添加一个条件，以便它可以从 result.txt 文件内容中上下读取该值，并将相应行的颜色更改为红色(向下) ) 和绿色(向上)？

P.S:请将我当前的代码复制到 .txt 文件(例如 test.txt)中，并将其另存为 test.html 并在 IE 或 Firefox 中打开。

我的代码:

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

结果.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.

最佳答案

尝试

将 results.txt 中的相关数据构造为 json 字符串，例如，以文件开头

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

- 不带空格 - 应该是 results.txt 的前 123 到 127 个字节，具体取决于 "up" 或 "down" 属性。或者，可以将数据放入不同的文件中，这样就不必计算 json 字符串在文件中的结束位置；整个文件可以是要处理的 json object，无论 blob.size 或 的 length json 字符串。

然后可以将数据处理为 json 或 object，即，

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

$(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/

编辑

fwiw，利用json格式的字符串(数据结构)，可以达到与$.getJSON()相同的结果

machines.json:

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

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/

关于javascript - 从本地目录读取文件并更改 HTML 表格行的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24577115/

25 4 0
文章推荐： javascript - 如何在单击时从 highchart 事件中的 html 元素触发 jquery 函数 onchange？
文章推荐： swift - 仅当 View Controller 通过滑动或后退按钮按下而不是通过切换选项卡从堆栈中弹出时才发送数据
文章推荐： javascript - 使用 FixtureAdapter 时如何使用非 -'id' 字段作为主键？
文章推荐： swift - 如何使用 Swift 在 iOS 8 上显示带有文本的事件指示器？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com