![](/img/trans.png)
[英]how to passing parameters in javascript onClick event using Jquery?
[英]Passing Parameters to JQuery onclick event
我是Jquery的新手,需要正確的策略來執行動態表單。
我想創建一個動態表單。 我從數據庫中檢索值,將它們顯示為行然后對於每個值,用戶可以根據需要添加任意數量的行。 下面的代碼顯示了一個為每個值創建一個表的循環,帶有“customFields”ID,后面帶有“$ i”變量以使其唯一。
// query code
$i = 1;
while ($row = mysql_fetch_array($sqlQ))
{
$var1 = $row['sid'];
$var2 = $total_rows;
?>
<table id="customFields<?php echo $i; ?>" class="box-table-a" align="left">
<thead>
<tr>
<th colspan="5" scope="col"><?php echo $row['VS_NAME']; ?></th>
<th scope="col" align="Right"><a href="javascript:void(0)" id="addCF<?php echo $i++; ?>" >Add Row</a></th>
</tr>
</thead>
</table>
}
現在為此代碼,我編寫以下javascript附加代碼。
<script>
<?php for ($i = 1; $i <=5; $i++) { ?>
$("#addCF"+<?php echo $i; ?>).click(function(){
$("#customFields<?php echo $i;?>").append('<tr ><td width="13%"><input type="text" name="godkant[]" class="fieldWidth" /></td><td width="11%" style="background:#b5dbe6" ><input type="text" name="foreRengoring[]" class="fieldWidth" /></td><td width="12%" style="background:#e6b8b8" ><input type="text" name="efterRengoring[]" class="fieldWidth" /></td><td width="12%" style="background:#c0d498" ><input type="text" name="borvarden[]" class="fieldWidth" /></td><td width="12%" style="background:#ffff66" ><input type="text" name="injust[]" class="fieldWidth" /></td><td width="40%" ><input type="text" name="noteringar[]" class="fieldWidthNote" /></td></tr>'); });
<?php } ?>
</script>
上面的代碼完全正常。 但我不知道我的php while循環將返回的值的數量。 所以我需要將兩個值傳遞給此javascript點擊事件。 一個用於循環,第二個用於在我們添加行時顯示。
問題; 1.實現這種功能的最佳策略是什么? 2.我可以使用Jquery事件處理程序(如果我正確地調用它 - $(#id).append ...)在我自己的函數中可以在Onclick事件上調用嗎?
我希望我能正確解釋這個問題。 這個問題被多次詢問,但我是Jquery的新手,這就是為什么我無法將答案映射到我的解決方案。
需要幫忙。
謝謝
在這種情況下,您的jQuery中不需要PHP。 你可以像這樣重構它:
$('.box-table-a a').click(function (evt) {
evt.preventDefault();
$(this).parents('table').append(rowHtml);
return false;
});
其中rowHtml
是您要添加的HTML。 如果您計划每個表有多個鏈接,則應該為添加鏈接分配一個類(例如, add-link
),然后您的事件監聽器變為$('.add-link').click
。 您還應該使用<a href="#"
替換HTML中的<a href="javascript:void(0)"
<a href="#"
。
小提琴: http : //jsfiddle.net/verashn/7HCZu/
編輯
要將其他數據傳遞到您的行,請將數據放在table
元素中,如下所示:
<table ... data-rowid="<?php echo $var1; ?>" data-total="<?php echo $var2; ?>">
然后用jQuery讀取它:
$('.box-table-a a').click(function (evt) {
...
var rowId = $(this).parents('table').data('rowid');
var total = $(this).parents('table').data('total');
});
演示(這會將ID和總數放入每行的第一個和第二個輸入字段): http : //jsfiddle.net/verashn/7HCZu/5/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.