Sujith Nair
Sujith Nair

Reputation: 97

Copy or clone the entire row of records in jquery

I have a my records or rows displaying in a while loop in PHP. I got a Add New href link before all the records. When the users press the Add New link the clone of the record is copied below. The admin will change that record as per his wish. This is the actual scenario.

I have pasted my script below. Its almost done. But when i click Add New (+) link, its cloning the text box but not the value of the row. So how will i pass the value of the text box to the javascript and jquery?

<!DOCTYPE html>
<html>
 <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Clone</title>

  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<style type='text/css'>
a{text-decoration:none;}
</style>


 <script type='text/javascript'>
 $(window).load(function(){
 $(document).ready(function(){
 var i = 0;

$('.addNew').on('click', function() {
    $('<tr class="clone"><td><input type="text" id="p_new'+i+'" name="data[]" value="" ><a href="#" class="remNew">-</a><td> </tr>').appendTo($(this).parent('td'));
    i++;

    return false;
});

$('.remNew').live('click', function() {
    var id = $(this).parentsUntil('tr.clone').attr('id');
    if( id != '0' ) {
      $(this).parentsUntil('tr.clone').remove();
      i--;
    }
    return false;
});
});
 });//]]>  

 </script>


 </head>
 <body>
   <table border="1">
        <tr>

        <td id="addinput">
            <input type="text" id="p_new" name="data[]" value="Show in Child element 1" ><a href="#" class="addNew">Add New</a>
        </td>
        </tr>
           <tr>           
        <td>
            <input type="text" id="p_new_1" name="data[]" value="Show in Child element 2" ><a href="#" class="addNew">Add New</a>
        </td>
        </tr>

    </table>

</body>
</html>



 Iam pasting the PHP part below:

 <?php
//mysql_connect("localhost","root","");
//mysql_select_db("test") or die("Unable to select database");
 include('config.php');

 $tender_id=$_GET['tender_id'];

echo "<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save.php?tender_id=$tender_id' >\n";

echo "<input type='hidden' name='sum_input' id='sum_input' value=''>";

$sql = "select id,slno,item_name,qty,item_units,unitprice,currency,total,total_inr,add_percentage,add_percentage_v,add_value,addon_value,price_unit,grand_total,tech_amend_req from quotation_items where tender_id='$tender_id'";

$result = mysql_query($sql) or die($sql."<br/><br/>".mysql_error());

$i = 0;

echo '<table width="100%" border="1" style="border-collapse: collapse;">';
echo '<tr>';
echo "<td></td>";
echo '<td>SlNo</td>';
echo '<td>Description</td>';
echo '<td>Qty</td>';
echo '<td>Units</td>';
echo '<td>Unit Price</td>';
echo '<td>Currency</td>';
echo '<td>Total</td>';
echo '<td>Total INR</td>';
echo '<td>Add Percentage(%)</td>';
echo '<td>Add On Value</td>';
echo '<td>Total Value</td>';
echo '<td>Price/Unit</td>';
echo '</tr>';

 //if($list5['tech_amend_req'] === '1') echo checked='checked'
while ($list5 = mysql_fetch_array($result)) {
 //$tech_amend_req=$list5['tech_amend_req'];
 if ($list5['tech_amend_req'] == '0') $checked = '';
 if ($list5['tech_amend_req'] == '') $checked = '';
 if ($list5['tech_amend_req'] == '1') $checked = 'checked=checked';

 //echo $checked;
    echo '<tr>';
    echo "<td><input type='checkbox' name='tech_amend_req[$i]'    id='tech_amend_req[$i]' value='1' $checked/></td>";
    echo "<td><input size='2' type='text' name='id[$i]' value='{$list5['id']}' readonly/></td>";
    echo "<td id='addinput'><input type='text' id='item_name$i' name='item_name[$i]' placeholder='{$list5['item_name']}' value='{$list5['item_name']}' /><a href='#' class='addNew'>+</a></td>";
    echo "<td><input size='2' type='text' name='qty[]' id='qty[]' value='{$list5['qty']}' readonly/></td>";
    echo "<td><input size='2' type='text' name='item_units[$i]' value='{$list5['item_units']}' readonly/></td>";
    echo "<td><input size='5' type='text' size='40' name='unitprice[$i]' value='{$list5['unitprice']}' readonly/></td>";
    echo "<td><input size='3' type='text' size='40' name='currency[$i]' value='{$list5['currency']}' /></td>";
    echo "<td><input size='6' type='text' size='40' name='total_old' value='{$list5['total']}' readonly/></td>";
    echo "<td><input size='6' type='text' size='40' id='total_inr[]' name='total_inr[]' value='{$list5['total_inr']}'/></td>";
    echo "<td><input class='' size='6' type='text' size='40' id='add_percentage[]' name='add_percentage[]' value='{$list5['add_percentage']}' onchange='calcTotals()'></td>";

    echo "<td><input class='' size='6' type='text' size='40' id='addon_value[]' name='addon_value[]' value='{$list5['addon_value']}' onchange='calcTotals()'></td>";

    echo "<td><input class='txt' size='6' type='text' size='40' id='add_value[]' name='add_value[]' value='{$list5['add_value']}' readonly></td>";
    echo "<td><input class='txt' size='6' type='text' size='40' id='price_unit[]' name='price_unit[]' value='{$list5['price_unit']}' readonly></td>";

    ++$i;
}

 $sql = "select grand_total from quotation_items where tender_id='$tender_id' LIMIT 1";

 $result_gt = mysql_query($sql) or die($sql."<br/><br/>".mysql_error());
 $list_gt = mysql_fetch_array($result_gt);

 echo "<tr><td  colspan=10></td><td><b>Grand Total:</b></td><td height=35><b><input style='font-weight: bold' name='gTotal' id='grand_total' value='{$list_gt['grand_total']}' readonly /></b></td></tr>";
echo '<tr></table>';

?>

Upvotes: 0

Views: 3426

Answers (3)

Praveen Raj
Praveen Raj

Reputation: 1014

Check out this, HTML:

<div id="add" style="color: Blue; text-decoration: underline;">
  Add row to table
</div>
<table border="1"  id="MyTable">
  <tr>
    <td id="addinput">
      <input type="text" id="p_new" name="data[]" value="" >
    </td>
  </tr>
</table>

JS:

var i = 0;
var value;

$("#add").on('click', function() {
  if ($("#MyTable").find('tr').length > 1) {
    value = $("#p_new" + (i-1)).val();
  } else {
    value = $("#p_new").val();
  }
  var myRow = '<tr><td> <input type="text" id="p_new' + i + '" name="data[]" value="' + value + '" ></td></tr>';
  i++;
  $("#MyTable").append(myRow);
});

Working Demo

Upvotes: 1

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5880

First of all I'd recommend you use two separate tables for your purpose (and not append rows to a td element).

Hence, your html would look like this:

    <table border="1">
        <tr>
            <td class="addinput">
                <input type="text" id="p_new" name="data[]" value="Show in Child element 1" ><a href="#" class="addNew">Add New</a>
            </td>
        </tr>
    </table>
    <table border='1'>
        <tr>           
            <td>
                <input type="text" id="p_new_1" name="data[]" value="Show in Child element 2" ><a href="#" class="addNew">Add New</a>
            </td>
        </tr>
    </table>

Then, in your Javascript, you can make use of jQuery's clone() method, whick literary clones a matched element. Here I've used it to clone a whole table row, and then appended it to the relative table.

$('.addNew').on('click', function() {
    var removeLink = '<a href="#" class="remNew">-</a>';
    var row = $(this).closest('table').find('tr:last-child').clone();

    row.find('a').attr('class', 'remNew');
    row.find('a').html('-');

    $(this).closest('table').append(row);

     //register for the 'removeLink' on click, so that it deletes the row
    row.find('a').click(function(){
       $(this).closest('tr').remove();
    }); 
});

Have a look at THIS on jsfiddle.net.

Upvotes: 2

Blue Rose
Blue Rose

Reputation: 533

I have edited your code and this is working perfect. Try this:

              <!DOCTYPE html>
              <html>
               <head>
              <meta http-equiv="content-type" content="text/html; charset=UTF-8">
                <title>Clone</title>
                 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

                  <script type="text/javascript">

                      function addRow() {

                          var myRow = '<tr><td> <input type="text" id="p_new" name="data[]" value="some value" ></td></tr>';

                          $("#MyTable tr:last").after(myRow);

                      }

                  </script>


               </script>


               </head>
               <body>
                <div onclick="addRow()" style="color: Blue; text-decoration: underline;">

                      Add row to table

                  </div>
                 <table border="1"  id="MyTable">
                      <tr>

                      <td id="addinput">
                          <input type="text" id="p_new" name="data[]" value="some value" >
                      </td>
                      </tr>

                  </table>

              </body>
              </html>

Let me know if your problem is solved or not. Cheers

Upvotes: 3

Related Questions