Javascript：如何在onChange事件期間更改日期時間值？

每當用戶更改下拉列表的值時，我都需要更改輸入框的值。值應該是「當前日期時間」，我不能使它工作。使用下面的代碼，每次更改特定行的下拉值（比如說第3行），所有行中輸入框（當前日期時間）的值都會受到影響。它們具有相同的當前日期時間值。其他行的當前日期時間值不應該改變。只有用戶更改下拉列的行。我在這裏錯過了什麼嗎？順便說一句，我必須使用DOM。Javascript：如何在onChange事件期間更改日期時間值？

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

來源

2016-05-13 Ti J

jsfiddle please .. –

看起來錯在這裏是你應該從0開始的索引

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

來源

2016-05-13 08:55:30

如何檢查select下拉列表中的值是否更改？ –

你已經寫過這個回調 ...........所以changeDateTime函數只會在選擇改變後纔會調用 –

我做你的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

希望你的作品！

來源

2016-05-13 08:56:53

檢查下面的代碼段。

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>

來源

2016-05-13 09:09:01 Pugazh

記住數組從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答案。

來源

2016-05-13 09:16:29

您正在使用firstChild，您真正需要的是firstElementChild屬性。有幾個types of nodes可用，並且您正在尋找的是Element類型的節點。

你的代碼不起作用的原因（除了數組索引應該從0開始，所以x=0和cell[1]）實際上是firstChild是一個類型爲text的節點，而不是輸入元素節點。做不是使用lastChild，因爲你不知道是否會有一個空的文本節點。

可以通過爲輸入標記設置class屬性來實現easyer方式，因此您可以使用getElementsByClassName（）函數。

如果你仍然想這樣做，這裏是解決方案。糾正這個循環，你很好。

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

來源

2016-05-13 09:44:11 Borna

Javascript：如何在onChange事件期間更改日期時間值？

回答

相關問題