将参数传递给JQuery onclick事件

Question

I am new in Jquery, and need the correct strategy to carry out a dynamic form.

I want to create a dynamic form. I retrieve values from database, display them as rows & then for every value, the user can add as many rows as he want. below code show a loop that create a table for every value, with "customFields" ID, which is append with "$i" variable to make it unique.

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

 }

Now for this code, I write the following javascript Append code.

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

The above code works perfectly fine. but I don't know the number of values my php while loop will return. so i need to pass two values to this javascript click event. one for the loop, and 2nd for to be displayed when we add a row.

Questions; 1. what is the best strategy to carry out this kind of function. 2. can I use Jquery event handler (if i am calling it correctly - $(#id).append...) in my own function which can be called on Onclick event?

I hope that I explain the problem correctly. This question is asked many times, but I am new to Jquery, thats why i am not able to map the answers to my solution.

need help.

Thanks

Answer 1

You don't need PHP inside your jQuery in this case. You can refactor it like this:

$('.box-table-a a').click(function (evt) {
    evt.preventDefault();
    $(this).parents('table').append(rowHtml);
    return false;
});

where rowHtml is the HTML you want to add. If you plan on having more than one link per table, you should assign a class to your add link (eg, add-link ), then your event listener becomes $('.add-link').click . You should also replace <a href="javascript:void(0)" in your HTML with <a href="#" .

Fiddle: http://jsfiddle.net/verashn/7HCZu/

EDIT

To pass additional data to your rows, place the data in your table element like this:

<table ... data-rowid="<?php echo $var1; ?>" data-total="<?php echo $var2; ?>">

Then read it with jQuery:

$('.box-table-a a').click(function (evt) {
    ...
    var rowId = $(this).parents('table').data('rowid');
    var total = $(this).parents('table').data('total');

});

Demo (this puts ID & total into the 1st and 2nd input field of every row): http://jsfiddle.net/verashn/7HCZu/5/