Question

我是php和javascript的新手所以请原谅我的无知。我正在尝试创建一个javascript来为多个单元格插入时间戳。我确实有一个按钮来插入或更新mysql数据库以输入时间戳now（），但这不是我正在寻找的路线。如果有人有更好的主意，请告诉我。基本上我想点击按钮将时间插入<td><center><input id="field" type="text" name="time[]" size="11"></center></td>.

<?php
include 'config.php';
?>
<html>
<head>
<script>

function getTimeStamp(id) {
	var now = new Date();
       return (now.getHours() + ':' + ((now.getMinutes() < 10) ? ("0" + now.getMinutes()) : (now.getMinutes())));
}

function setTime() {
    document.getElementById('field').value = getTimeStamp();

</script>
</head>
<body >
<div>

<button type="button" onclick="setTime();">TimeStamp</button>
<table >

 <tr >
  <td >id</td>
  <td >First Name</td>
  <td >Last Name</td>
  <td >Location</td>
  <td >Remarks</td>
  <td >Timestamp</td>
  
 </tr>

<?php
while ($row = mysqli_fetch_array($sql)){
	print '<tr>
		<td><input type="hidden" name="id[]" value="'. $row[0] .'">' .$row[0]. '</td>
		<td><input type="hidden" name="first[]" value="'. $row[1] .'">' .$row[1]. '</td>
		<td><input type="hidden" name="last[]" value="'. $row[2] .'">' .$row[2]. '</td>
		<td><input  name="location[]" value="'. $row[3] .'">' .$row[3]. '</td>
		<td><center><input type="text" name="remarks[]" size="43"></center></td>
		<td><center><input id="field" type="text" name="time[]" size="11"></center></td>
	</tr>';
}
?>
</table>
</div>
</body>
</html>

Answer 1

您首先需要添加 class 而不是 id ，因为ID是唯一的＆amp; class可以重复，而不是使用<input id="field" type="text" name="time[]" size="11">此更改为<input id="field" class="timestamp-fields" type="text" name="time[]" size="11">然后

更改 setTime 功能

function setTime() {
  var elements = document.getElementsByClassName('timestamp-fields'), l = elements.length, t = getTimeStamp();
  for (var i = 0; i < l; i++) {
    elements[i].value = t;
  }
}

但是你必须记住你使用的客户 Date 不是 UTC/GMT 0 所以您可能需要使用PHP将其转换为服务器端。

Answer 2

如果我理解正确，您想通过点击按钮在所有输入字段time[]中设置时间戳？

我无法完全测试该函数，因为您的getTimestamp函数会调用此处未定义的其他函数，但它应该可以正常运行...

function setTime() {
    var col=document.querySelectorAll('input[type="text"][name="time[]"]');
    if(col){
        for( var n in col ) if(col[n].nodeType==1) col[n].value=getTimeStamp();
    }
}

根据您的评论

如果您希望基于单击字段为每个文本输入设置唯一的时间戳，则功能和分配需要稍微不同。由于您不再需要带有setTime功能的按钮，您可以使用类似的内容删除按钮并删除setTime功能......

function bindTimeEvents(){
    var col=document.querySelectorAll('input[type="text"][name="time[]"]');
    if( col ){
        for( var n in col )if( col[ n ].nodeType ==1 ){
            col[n].addEventListener('click',function(e){
                this.value=getTimeStamp();
            }.bind( col[n] ),false);
        }
    }
}
document.addEventListener('DOMContentLoaded',bindTimeEvents,false);

javascript php将时间戳添加到多个单元格

2 个答案: