Question

每次用户更改下拉列表的值时，我都需要更改输入框的值。该值应该是“当前日期时间”我无法使其工作。使用下面的代码，每次我更改特定行的下拉值（比如第3行）时，所有行中输入框（当前日期时间）的值都会受到影响。它们具有相同的当前日期时间值。不应更改其他行Current Date Time值。只有用户更改下拉列表的行。我在这里错过了什么吗？我必须顺便使用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;
       } 
}

Answer 1

查看下面的代码段。

setSpan()

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;
}

Answer 2

首先看起来错误的是你应该从0索引开始

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

Answer 3

我在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;  
}

fiddle

希望它适合你!!

Answer 4

记住数组从0开始，所以你的脚本应该是这样的

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

输入字段也不是firstChild。

Working Example

注意：

这样你改变每一行中的日期都不知道你是否想要那样。如果不是，我会使用Pugazh回答。

Answer 5

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

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

通过将class属性设置为input标签可以有一种更简单的方法，因此您可以使用getElementsByClassName（）函数。

如果您仍然希望这样，那么这就是解决方案。纠正这个循环，你没事。

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

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

5 个答案: