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内部text / 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>

用jquery显示时间

1 个答案: