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

标签 javascript php jquery

我的记录或行在 PHP 的 while 循环中显示。我在所有记录之前都有一个“添加新的 href”链接。当用户按下“添加新”链接时,记录的克隆将复制到下面。管理员将根据他的意愿更改该记录。这是实际场景。

我已将我的脚本粘贴在下面。快完成了。但是,当我单击添加新 (+) 链接时,它会克隆文本框,但不会克隆行的值。那么我如何将文本框的值传递给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>

请告诉我您的问题是否解决。 干杯

关于javascript - 在 jquery 中复制或克隆整行记录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31912044/

相关文章:

javascript - 如何为按回车键执行搜索的现有代码创建搜索按钮? php/javascript/mysql

php - PHP fsockopen() 错误 paypal 的任何替代方法?

javascript - 为什么单击更改状态且与 ajax 调用无关的选项卡会创建该 ajax 调用?

php - 处理 php 中的特定异常

javascript - 如果 div 不包含具有给定类的元素,则执行一些代码

javascript - 如何用JS模拟按键?

javascript - Jenkins 描述

javascript - 将项目添加到 JSON 对象

javascript - 如何找到加载的 swf 播放的视频 url?

Javascript - 如何避免在繁重工作时阻塞浏览器?