Использование 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

Использование x.style.backgroundColor

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 = "#009900";
  }
  else { 
    x.innerHTML = "Out";
    x.style.backgroundColor = "#ff6666";
  }
}

<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%;">
      </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>
  </tbody>
</table>

Answer 2

Вы можете использовать свойство background-color.

function SM1() {
  var x = document.getElementById("SM1");
  if (x.innerHTML === "Out") {
    x.innerHTML = "In";
    x.setAttribute("style", "background-color: #BBBB;")
  } else {
   x.innerHTML = "Out";
  }
}

Answer 3

Просто добавьте это в оператор if / else вашей функции SM1.Затем вы можете изменить цвет в зависимости от того, что вам больше нравится.

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>