时间戳

首页 > 解决方案 > 使用 JavaScript 函数更新 HTML 表格数据

javascript - 使用 JavaScript 函数更新 HTML 表格数据

问题描述

我有一个 HTML 表，我希望使用一个 JavaScript 函数来更新它，该函数分析另一个页面上提交的 TextArea 标记中的文本。我正在调用我希望使用 TD 的 ID 更新的表格部分，但是在点击时，表格似乎没有使用预期的数据进行更新。我知道该功能是可操作的，因为检查文本的初始表单验证确实有效。这是JS代码：

function textSubmit() {
var headers = document.getElementById("headers").value;
if (headers == "") {
    alert("Please submit email headers before proceeding.");
    return false;
} else {
    var a = document.getElementById("td1");
    var answer1 =  /Thread-Topic: (.+)/im.exec(headers)[1];
    a.innerHTML = answer1;

    var b = document.getElementById("td2");
    var answer2 =  /Date: (.+)/im.exec(headers)[1];
    b.innerHTML = answer2;

    var c = document.getElementById("td3");
    var answer3 =  /From: (.+)/im.exec(headers)[1];
    c.innerHTML = answer3;

    var d = document.getElementById("td4");
    var answer4 =  /To: (.+)/im.exec(headers)[1];
    d.innerHTML = answer4;

    var e = document.getElementById("td5");
    var answer5 =  /X-Ms-Has-Attach: (.+)/im.exec(headers)[1];
    e.innerHTML = answer5;
  }
}

这是我要更新的 HTML 表：

<table id="myTable">
    <tr>
      <th>Subject Header</th>
      <td id="td1"></td>
    </tr>
    <tr>
      <th>Actual Sender Address or Domain</th>
      <td id="td2"></td>
    </tr>
    <tr>
      <th>Sender IP Address</th>
      <td id="td3"></td>
    </tr>
    <tr>
      <th>Date/Time</th>
      <td id="td4"></td>
    </tr>
    <tr>
      <th>Attachments?</th>
      <td id="td5"></td>
    </tr>
  </table>

关于我可能在哪里出错的任何建议？或者为什么文本没有更新？谢谢。

标签： javascripthtmlhtml-table

解决方案

这是你要找的吗？

function textSubmit() {
  var headers = document.getElementById("headers").value;
  if (headers == "") {
    alert("Please submit email headers before proceeding.");
    return false;
  } else {
    var a = document.getElementById("td1");
    var answer1 = (/Thread-Topic: ([^\ ]+)/im.exec(headers) ?? [])[1];
    a.innerHTML = answer1 ?? '';

    var b = document.getElementById("td2");
    var answer2 = (/Date: ([^\ ]+)/im.exec(headers) ?? [])[1];
    b.innerHTML = answer2 ?? '';

    var c = document.getElementById("td3");
    var answer3 = (/From: ([^\ ]+)/im.exec(headers) ?? [])[1];
    c.innerHTML = answer3 ?? '';

    var d = document.getElementById("td4");
    var answer4 = (/To: ([^\ ]+)/im.exec(headers) ?? [])[1];
    d.innerHTML = answer4 ?? '';

    var e = document.getElementById("td5");
    var answer5 = (/X-Ms-Has-Attach: ([^\ ]+)/im.exec(headers) ?? [])[1];
    e.innerHTML = answer5 ?? '';
  }
}

textSubmit()
<input type="text" id="headers" value="Thread-Topic: 44 Date: 22 etc" oninput="textSubmit()"/>
<table id="myTable">
  <tr>
    <th>Subject Header</th>
    <td id="td1"></td>
  </tr>
  <tr>
    <th>Actual Sender Address or Domain</th>
    <td id="td2"></td>
  </tr>
  <tr>
    <th>Sender IP Address</th>
    <td id="td3"></td>
  </tr>
  <tr>
    <th>Date/Time</th>
    <td id="td4"></td>
  </tr>
  <tr>
    <th>Attachments?</th>
    <td id="td5"></td>
  </tr>
</table>

推荐阅读