javascript - 使用javascript更改文本的值，以及HTML页面中表格内单元格的背景颜色

Question

我正在尝试使用 HTML、CSS 和 JavaScript 构建一个员工签到板。我对 JavaScript 知之甚少，之前只接触过 HTML 和 CSS。

我有 3 列，当按下下一列中的按钮时，一列返回日期和时间(努力获得实时计时器，但这是另一天的问题)，下一列包含带工作人员的按钮成员名称，当他们单击按钮时，下一列中的单元格从“Out”变为“In”并返回。

我现在尝试根据文本的值更改第三列的背景颜色。我尝试了几种不同的方法，但没有任何改变颜色。我是否因为同一个按钮运行了太多脚本而被阻止？

代码示例是:

var d = new Date()

function show(id) {
  if (id == 1) {
    document.getElementById('Staff member').value = d;
  }
}

function SM1() {
  var x = document.getElementById("SM1");
  if (x.innerHTML === "Out") {
    x.innerHTML = "In";
  } else {
    x.innerHTML = "Out";
  }
}

<table style="overflow:scroll; width:100%; text-align:center; font-size:150%;">
  <thead>
    <tr>
      <th style="width:18%;">Time</th>
      <th style="width:58%;">Name</th>
      <th style="width:18%;">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width:18%;"><input type="text" id="Staff member" value="" style="width:98%; font-size:100%;"></input>
      </td>
      <td style="width:58%;"><button id="1" style="width:100%; font-size:100%;" type="button" onclick="show(this.id);SM1()">Staff member</button></td>
      <td style="width:18%;">
        <div id="SM1">Out</div>
      </td>
    </tr>
  </body>
</table>

Answer 1

只需将它添加到 SM1 函数的 if/else 语句中。然后您可以将颜色更改为您喜欢的颜色。

var d = new Date()   
function show(id) { 
    if (id == 1) { 
        document.getElementById('Staff member').value = d; 
    } 
}

function SM1() { 
    var x = document.getElementById("SM1"); 
    if (x.innerHTML === "Out") { 
        x.innerHTML = "In";
        x.style.backgroundColor = "blue";
    }    
    else { 
        x.innerHTML = "Out";
        x.style.backgroundColor = "red";
    } 
}

<table style="overflow:scroll; width:100%; text-align:center; font-size:150%;">
    <thead>
        <tr>
            <th style="width:18%;">Time</th>
            <th style="width:58%;">Name</th>
            <th style="width:18%;">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:18%;"><input type="text" id="Staff member" value=""
                    style="width:98%; font-size:100%;"></input></td>
            <td style="width:58%;"><button id="1" style="width:100%; font-size:100%;" type="button"
                    onclick="show(this.id);SM1()">Staff member</button></td>
            <td style="width:18%;">
                <div id="SM1">Out</div>
            </td>
        </tr>
        </body>
</table>