Изменение значения поля в строке таблицы через JS

251
22 ноября 2021, 06:30

Прошу помочь советом, как написать очень небольшой скрипт на JS, который бы изменял значение поля "Дата создания детали" на целевое время (не реальное, а которое необходимо вручную указать в скрипте), но при этом делал бы это изменение не через table.rows[1].cells[1].innerHTML, а через указание номера детали.

Я в кодинге, в целом (и в JS, в частности) - полный ноль, поэтому примерно представляю работу скрипта так:

if ("тут пишется заданный номер детали вручную" = искомый номер детали)

Изменение даты с дефолтной на "тут пишется дата вручную"

else ("тут пишется заданный номер детали вручную" != искомый номер детали)

вывод ошибки "не найдено детали" обычным текстом, по аналогии с printLn от Java

При этом нет необходимости создавать диалоговые окна и иные средства представления, всё организовано через программный интерфейс, т.е. нужен ТОЛЬКО скрипт. На HTML создан пример таблицы просто потому, что я не знаю, как по-другому представить данный пример. В реальной жизни это некая база данных, которая управляется через HP Service Manager, который, в свою очередь, вроде как имеет возможность писать скрипты для управления базой данных на чистом JS наподобие VBA-макросов в MS Excel.

<!DOCTYPE html>
<meta charset="utf-8" />
<style>
    table, td{
        border: 1px solid #ccc;
        border-collapse: collapse;
        table-layout: fixed;
        border-spacing: 0;
    }
    table, th{
        border: 1px solid #ccc;
        border-collapse: collapse;
        table-layout: fixed;
        border-spacing: 0;
    }
    td{
        padding: 4px;
    }
    td input{
        width: 100%;
        padding: 4px;
        margin: 0;
        border: none;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font: inherit;
        height: 28px;
    }
    td input:focus{
        outline: 1px solid blue;
    }
    .editable td{
        padding: 0;
    }
    #edit{
        width: 800px;
    }
</style>
<body>
<table id="Детали">
    <thead><tr>
        <th>Номер детали</th>
        <th>Дата создания детали</th>
    </thead>
    <tbody>
    <tr id="0">
        <td data-type="text">IM0123</td>
        <td data-type="number">01.01.1980 00:00</td>
    </tr>
    <tr id="1">
        <td data-type="text">IM0234</td>
        <td data-type="number">01.01.1980 00:00</td>
    </tr>
    <tr id="2">
        <td data-type="text">IM0345</td>
        <td data-type="number">01.01.1980 00:00</td>
    </tr>
    </tbody>
</table>
</body>
<script>
    var table = document.getElementById('Детали');
    table.rows[1].cells[1].innerHTML = '21.11.2019 16:00'
    </script>
</html>
Answer 1

Ну раз таке дело... вместо того, чтобы менять один кусок таблицы в зависимости от другого куска, можно сразу всё заполнение привязать к массиву данных. Так и редактировать будет удобнее:

let DETAILS = [ 
  {name: "IM0123", time: "01.01.1980 00:00", bubu: "15"}, 
  {name: "IM0234", time: "05.05.1980 00:00", bubu: "45"}, 
  {name: "IM0345", time: "09.09.1980 00:00", bubu: "105"}, 
]; 
 
/***************************/ 
 
fillTable('Детали'); 
 
function fillTable(id){ 
  let trs = document.querySelectorAll('#' + id + ' tbody tr'); 
   
  Array.from(trs).forEach(function(tr, index){ 
    let td = tr.querySelectorAll('td'); 
     
    let d = DETAILS[index]; 
    td[0].textContent = d.name; 
    td[1].textContent = d.time; 
    td[2].textContent = d.bubu; 
  }); 
}
table { border-collapse: collapse; } 
 
td, th { padding: 5px; border: 1px solid #999; }
<table id="Детали"> 
  <thead> 
    <tr> 
      <th>Номер детали</th> 
      <th>Дата создания детали</th> 
      <th>bubu</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr> 
      <td data-type="text"></td> 
      <td data-type="number"></td> 
      <td></td> 
    </tr> 
    <tr> 
      <td data-type="text"></td> 
      <td data-type="number"></td> 
      <td></td> 
    </tr> 
    <tr> 
      <td data-type="text"></td> 
      <td data-type="number"></td> 
      <td></td> 
    </tr> 
  </tbody> 
</table>

Answer 2

var headings = document.querySelectorAll('.list__item__heading'); 
 
headings.forEach(changeDate); 
 
function changeDate(heading) { 
  var dateField = heading.nextElementSibling; 
 
  switch (heading.innerText) { 
    case 'IM0123': 
      dateField.innerText = '18.06.2015 10:00'; 
      break; 
    case 'IM0234': 
      dateField.innerText = '3.04.2013 11:20'; 
      break; 
    case 'IM0345': 
      dateField.innerText = '1.10.2019 12:20'; 
      break; 
    default: 
      dateField.innerText = '01.01.1980 00:00'; 
  } 
}
<ul class="list"> 
  <li class="list__item"> 
    <h2 class="list__item__heading">IM0123</h2> 
    <div class="list__item__date">01.01.1980 00:00</div> 
  </li> 
  <li class="list__item"> 
    <h2 class="list__item__heading">IM0234</h2> 
    <div class="list__item__date">01.01.1980 00:00</div> 
  </li> 
  <li class="list__item"> 
    <h2 class="list__item__heading">IM0345</h2> 
    <div class="list__item__date">01.01.1980 00:00</div> 
  </li> 
</ul>

READ ALSO
Как сделать такие цифры?
CSS

Как сделать такие цифры?

Ссылка на картинку

 140
Анимация рамки вокруг элемента
CSS

Анимация рамки вокруг элемента

Как отрисовать такую анимацию?

 85
Сделать чекбоксы в две колонки
CSS

Сделать чекбоксы в две колонки

как сделать чекбоксы в две колонки, не используя column-countИ чтобы при нажатии на кнопку More те чекбоксы, которые уже видны оставались на месте,...

 203
Почему не работает JavaScript в HTML?
CSS

Почему не работает JavaScript в HTML?

Не работает вроде бы простой скрипт с сайтом, путь указан верно

 287