jquery - 用jquery显示时间

Question

考虑这两个表:

<table id="prototype" style="display:none;">
<tr>
<td></td>
<td><input type="text" ></td>
<td><?php echo date("h:i:s");?></td>
<td><?php echo date("d-m-Y");?></td>
<td>
    <a href="#" class="removeRow"><img width="20px" height="20px" src="images/Remove32.PNG" title="remove" /></a></td>
</tr>
</table>
  <table id="tblGrid" cellspacing="0">
    <tr>
      <th>Instraction</th>
      <th>Result</th>
      <th>Time</th>
      <th>Date</th>
      <th>Add</th>
    </tr>
    <?php do { ?>
      <tr>
        <td><?php echo $row_instRecordset['instName']; ?></td>
        <td><?php echo $row_instRecordset['instValue']; ?></td>
        <td><?php echo $row_instRecordset['instTime']; ?></td>
        <td><?php echo $row_instRecordset['instDate']; ?></td>
        <td><a class="addRow"><img width="20px" height="20px" src="images/add_32.png"/></a></td>
      </tr>
      <?php } while ($row_instRecordset = mysql_fetch_assoc($instRecordset)); ?>
  </table>
  <a class="newOrder">Save</a>

我使用这个 jQuery 函数在单击的行之后插入新行

<script type="text/javascript">
$(document).ready(function(){
        var $prototypeRow = $("#prototype").find("tr").eq(0);
    $(".addRow").click(function(){
        $prototypeRow.clone(true).insertAfter($(this).closest("tr"));
        return false;
    });
    $(".removeRow").click(function(){
        if( confirm('Remove row?') ){
            $(this).closest("tr").remove();
        }
        return false;
    });
});
</script>

这对于插入工作正常，但我在显示当前时间时遇到问题。

它显示错误的时间，并且当我单击插入按钮时它不会改变。它会重复相同的时间并且不会“重新读取”​​。

这是第三个<td>第二个<td>包含文本输入，我想问如何(使用 jQuery)在单击“保存”按钮后用其值替换此文本输入字段？

Answer 1

当 php 脚本在页面上呈现时，它将具有静态内容，因此不要期望当您克隆 tr 元素时日期会动态更改。您必须使用 javascript 日期对象将 td 内部文本/html 更新为当前日期。

试试这个

    <script type="text/javascript">
        $(document).ready(function(){
                var $prototypeRow = $("#prototype").find("tr").eq(0);
            $(".addRow").click(function(){
                var tds = $prototypeRow.clone(true).insertAfter($(this).closest("tr")).find("td"), dt = new Date();
                tds.eq(1).find("input").val("textInputGoesHere");
                tds.eq(2).html(dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds());
                tds.eq(3).html(dt.getDate() + ":" + (parseInt(dt.getMonth())+1) + ":" + dt.getFullYear());
                return false;
            });
            $(".removeRow").click(function(){
                if( confirm('Remove row?') ){
                    $(this).closest("tr").remove();
                }
                return false;
            });

$('#save').click(function () { 
      $("#tblGrid input").each(function(){
         $(this).replaceWith("<p>" + $(this).val() + "</p>");
      });
});
        });
        </script>