Question

Consider these two table:

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

I used this jQuery function to insert new row exactly after clicked row

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

This is working fine for insertion, but I encounter a problem in displaying the current time.

It displays the wrong time, and it doesn’t change when I click the insertion button. It repeats the same time and doesn’t “take new read”.

This on third <td> the second <td> contain text input and I want to ask how can I (using jQuery) replacing this text input field with its value after clicking in save button?

Answer 1

When php script is rendered on the page it will have the static content so dont expect the date will be dynamically changed when you clone the tr element. You will have to update the td inner text/html with current date using javascript date object.

Try this

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