Javascript:如何在onChange事件期间更改日期时间值

Javascript: How to change datetime value during onChange event?

本文关键字：日期 时间 事件 onChange Javascript      更新时间：2023-09-26
每次

用户更改下拉列表的值时，我都需要更改输入框的值。该值应该是"当前日期时间"，我无法使其工作。使用下面的代码，每次我更改特定行的下拉值(例如在第 3 行中(时，所有行中输入框的值(当前日期时间(都会受到影响。它们具有相同的当前日期时间值。其他行的"当前日期时间"值不应更改。仅用户更改下拉列表的行。我在这里错过了什么吗？顺便说一下，我必须使用 DOM。

    <table id="myTable">
      <tr>
        <td>Value to Select: <select onChange="changeDateTime();"></select></td>
        <td>Current Date Time: <input/></td>
      </tr>
    </table>

Javascript：

function changeDateTime(){
  var today = new Date();
  var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
  var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var currentDateTime = date+' '+time;
  var d =  id('myTable', document); 
  for (var x=1; x<d.rows.length; x++) {                    
       d.rows[x].cells[2].firstChild.value = currentDateTime;
       } 
}

查看下面的代码片段。

function changeDateTime(obj) {
  var today = new Date();
  var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
  var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  var currentDateTime = date + ' ' + time;
  var _input = obj.parentNode.nextElementSibling.getElementsByTagName('input')[0]
  _input.value = currentDateTime;
}
<table id="myTable">
  <tr>
    <td>Value to Select:
      <select onChange="changeDateTime(this);">
        <option>1</option>
        <option>2</option>
      </select>
    </td>
    <td>Current Date Time:
      <input/>
    </td>
  </tr>
  <tr>
    <td>Value to Select:
      <select onChange="changeDateTime(this);">
        <option>3</option>
        <option>4</option>
      </select>
    </td>
    <td>Current Date Time:
      <input />
    </td>
  </tr>
</table>

这里看起来不对的第一件事是你应该从 0 索引开始

for (var x=0; x<d.rows.length; x++) {                    
   d.rows[x].cells[2].firstChild.value = currentDateTime;
}

我已经在您的 HTML 中做了一些更改，以将一些数据放在您的选择列表中。见下文：

<table id="myTable">
  <tr>
    <td>Value to Select: <select onchange="javascript:changeDateTime();">
      <option>-- select --</option><option>ShowDate</option>
    </select></td>
    <td>Current Date Time: <input id="txtDate"/></td>
  </tr>
</table>
此外，对

javascript函数进行了一些更改，该函数通过按id获取文本框在文本框中显示日期时间。

function changeDateTime(){
  var today = new Date();
  var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
  var time = today.getHours() + ":" + today.getMinutes() + ":" +   today.getSeconds();
  var currentDateTime = date+' '+time;
  document.getElementById('txtDate').value = currentDateTime;  
}

小提琴

希望它对你有用！

记住数组从 0 开始，所以你的脚本应该看起来像这样

var d = document.getElementById("myTable");
for (var x=0; x<d.rows.length; x++) {
  d.rows[x].cells[1].lastChild.value = currentDateTime;
}

输入字段也不是firstChild。

工作示例

注意：

这样，您可以更改每行中的日期，不知道是否要这样做。如果没有，我会使用普加什的答案。

您正在使用 firstChild，您真正需要的是 firstElementChild 属性。有几种类型的节点可用，您正在寻找的是 Element 类型的节点。

你的代码不起作用的原因是(除了数组索引应该从 0 开始，所以 x=0 和 cell[1] (实际上是 firstChild 是文本类型的节点，而不是输入元素节点。也不要使用lastChild，因为您不知道是否会有一个空文本节点。

通过将

类属性设置为输入标签，可能有一种更简单的方法，因此您可以使用getElementsByClassName((函数。

如果您仍然想走这条路，这里是解决方案。纠正这个循环，你没事。

for (var x=0; x<d.rows.length; x++) {
            d.rows[x].cells[1].firstElementChild.value = currentDateTime;
}
相关文章：