Javascript 复制或克隆jquery中的整行记录
我在PHP中有一个while循环中显示我的记录或行。我在所有记录之前添加了一个新的href链接。当用户按下添加新链接时，记录的克隆将复制到下面。管理员将根据自己的意愿更改该记录。这是实际情况 我已将我的脚本粘贴到下面。差不多了。但是，当我单击“添加新（+）链接”时，它克隆的是文本框，而不是行的值。那么如何将文本框的值传递给javascript和jquery呢Javascript 复制或克隆jquery中的整行记录,javascript,php,jquery,Javascript,Php,Jquery,我在PHP中有一个while循环中显示我的记录或行。我在所有记录之前添加了一个新的href链接。当用户按下添加新链接时，记录的克隆将复制到下面。管理员将根据自己的意愿更改该记录。这是实际情况 我已将我的脚本粘贴到下面。差不多了。但是，当我单击“添加新（+）链接”时，它克隆的是文本框，而不是行的值。那么如何将文本框的值传递给javascript和jquery呢 <!DOCTYPE html> <html> <head> <meta http-equiv=
<!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>';
克隆
a{文本装饰：无；}
$（窗口）。加载（函数（）{
$（文档）.ready（函数（）{
var i=0；
$（'.addNew'）。在（'click'，function（）上{
$（''）.appendTo（$（this.parent（'td'））；
i++；
返回false；
});
$（'.remNew'）.live（'click'，function（）{
var id=$（this.parentsUntil（'tr.clone'）.attr（'id'）；
如果（id！=“0”）{
$（this.parentsUntil（'tr.clone'）.remove（）；
我--；
}
返回false；
});
});
});//]]>
我正在粘贴下面的PHP部分：
我已经编辑了您的代码，它工作得非常好。试试这个：
<!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>
克隆
函数addRow（）{
var myRow=''；
$（“#MyTable tr:last”）。在（myRow）之后；
}
将行添加到表中
让我知道你的问题是否解决了。
干杯我已经编辑了您的代码，这非常好用。试试这个：
<!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>
克隆
函数addRow（）{
var myRow=''；
$（“#MyTable tr:last”）。在（myRow）之后；
}
将行添加到表中
让我知道你的问题是否解决了。
干杯首先，我建议您使用两个单独的表（不要将行附加到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>
看看jsfiddle.net。首先，我建议您使用两个单独的表（不要将行附加到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>
在jsfiddle.net上查看一下。看看这个，
HTML:
将行添加到表中
JS:
var i=0；
var值；
$（“#添加”）。在（'单击'，函数（）上{
if（$（“#MyTable”）.find（'tr'）.length>1）{
value=$（“#p#u new”+（i-1））.val（）；
}否则{
value=$（“#p#u new”）.val（）；
}
var myRow=''；
i++；
$（“#MyTable”）.append（myRow）；
});
工作看看这个，
HTML:
将行添加到表中
JS:
var i=0；
var值；
$（“#添加”）。在（'单击'，函数（）上{
if（$（“#MyTable”）.find（'tr'）.length>1）{
value=$（“#p#u new”+（i-1））.val（）；
}否则{
value=$（“#p#u new”）.val（）；
}
var myRow=''；
i++；
$（“#MyTable”）.append（myRow）；
});
正在工作这不是克隆。它正在附加一个原始HTML。您所说的>的可能重复项下面复制了记录的克隆。例如：我显示了一些记录。并且在每行后面都会添加一个新（+）。当我单击addnew链接时，必须将该特定的--clone复制到行的下面，我的意思是使用值或数据。1.厕所，john@john.com-添加新（+）2。艾哈迈德，ahmad@ahmad.com-添加新（+）3。苏吉特，sujith@sujith.com-添加新（+）简言之，文本框的值必须复制或克隆到文本框下方。到目前为止，它没有复制文本框的值。它正在复制一个空白文本框。请帮忙……这不是克隆。它正在附加一个原始HTML。您所说的>的可能重复项下面复制了记录的克隆。例如：我显示了一些记录。并且在每行后面都会添加一个新（+）。当我单击addnew链接时，必须将该特定的--clone复制到行的下面，我的意思是使用值或数据。1.厕所，john@john.com-添加新（+）2。艾哈迈德，ahmad@ahmad.com-添加新（+）3。苏吉特，sujith@sujith.com-添加新（+）简言之，文本框的值必须复制或克隆到文本框下方。到目前为止，它没有复制文本框的值。它正在复制一个空白文本框。谢谢你的回复。但它不是复制或克隆文本框的值。它显示一个空白的文本框。在文本框中写一些东西。如果它有效，请向上投票并勾选我的答案：）我正在用php的数组中显示while循环的结果。而（$list5=mysql_fetch_array（$result））{echo”“；i++}实际上必须克隆此值。不是硬编码的值。谢谢您的时间。我现在也在问题中添加了php部分。谢谢你的回复。但它不是复制或克隆文本框的值。它显示一个空白的文本框。在文本框中写一些东西。如果它有效，请向上投票并勾选我的答案：）我正在用php的数组中显示while循环的结果。而（$list5=mysql_fetch_array（$result））{echo”“；i++}必须克隆此值
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);
});