最受欢迎

在jquery中复制或克隆整行记录

Copy or clone the entire row of records in jquery

本文关键字：记录 jquery 复制 | 更新日期: 2023-09-27

我有一个我的记录或行显示在一个while循环在PHP。我在所有记录前加了个新链接。当用户按Add New链接时，记录的克隆被复制到下面。管理员将根据自己的意愿更改该记录。这是实际情况。

我把我的脚本粘贴在下面。差不多好了。但是当我单击添加新(+)链接时，它克隆文本框，而不是行值。那么我如何将文本框的值传递给javascript和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>';

?>

我已经编辑了你的代码，这是完美的工作。试试这个:

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

让我知道你的问题是否解决了。欢呼声

首先，我建议您使用两个单独的表(并且不要将行附加到td元素)。

因此，你的html应该是这样的: 
    <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>
然后，在Javascript中，您可以使用jQuery的clone()方法，该方法将复制匹配的元素。这里我使用它克隆了整个表行，然后将附加到相对表中。 
$('.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();
    }); 
});

在jsfiddle.net上看看这个

看看这个，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);
});
演示工作

相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习