Javascript：onChangeイベント中にdatetime値を変更するにはどうすればよいですか？

Question

ユーザーがドロップダウンの値を変更するたびに、入力ボックスの値を変更する必要があります。値は私がそれを動作させることができない "現在の日付の時間"でなければなりません。下のコードでは、特定の行のドロップダウン値を変更するたびに（行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; 
     } 
} 

Answer 1

ここで間違って見て最初のものは、あなたが私はあなたにいくつかのデータを入れて、あなたのHTMLにいくつかの変更を行っている0インデックス

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

Answer 2

で始めるべきですリストを選択します。下記を参照してください：

また、javadoc関数のいくつかの変更は、idでテキストボックスを取得してテキストボックスにdatetimeを表示しています。

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 3

以下のスニペットを確認してください。

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>

Answer 4

配列は、ので、あなたのスクリプトは、入力フィールドがfirstChildではありません。この

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

のようになります0から始まる覚えておいてください。

Working Example

注：あなたがそれをしたい場合は、すべての行に日付を変更

この方法は知りません。 私はPugazh答えを使用しない場合。

Answer 5

firstChildを使用しています。本当に必要なのはfirstElementChildです。 types of nodesがいくつかあります。あなたが探しているのはElement型のノードです。

あなたのコードが機能しない理由（その配列インデックスは0から始まるはずですので、x=0とcell[1]）は、実際にはfirstChildがinput要素ノードではなくtext型のノードであることです。 は、空のテキストノードがあるかどうかわからないので、lastChildを使用してください。

getElementsByClassName（）関数を使用できるように、クラス属性を入力タグに設定すると簡単な方法があります。

このようにしたい場合は、ここをクリックしてください。 これをループで修正しても問題ありません。

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