0

Прошу помочь советом, как написать очень небольшой скрипт на 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>
3
  • А в чем прикол? Почему нельзя сразу в html вписать нужную дату?
    – user355286
    22 ноя 2019 в 14:31
  • В том то и загвоздка, что нужно использовать JS-скрипт. Если бы была возможность, то конечно, через html я давно всё бы поменял 22 ноя 2019 в 14:34
  • Спасибо Вам, добрый человек). Напишите это как ответ, чтобы я Вас отметил галочкой 22 ноя 2019 в 14:57

2 ответа 2

2

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

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>

1

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>

3
  • Кстати, а если есть уже дефолтное значение времени создания детали (например 01.01.1980 00:00) и необходимо изменить его? Например, <div class="list__item__date">01.01.1980 00:00</div> - как можно поменять значение через JS? 22 ноя 2019 в 15:06
  • Не меняет, к сожалению. Хотя должно, по идее скрипту без разницы, пустое поле или чем-то заполнено 22 ноя 2019 в 15:09
  • Всё, разобрался. Забыл добавить закрывающий тег </script>. Всё работает. Ещё раз благодарю Вас. 22 ноя 2019 в 15:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.