javascript - 将参数传递给 JQuery onclick 事件

Question

我是 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 的新手，这就是为什么我无法将答案映射到我的解决方案。

需要帮助。

谢谢

Answer 1

在这种情况下，您的 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="javascript:void(0)"在 HTML 中使用 <a href="#" .

fiddle :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/