Question

I have a table that is created dynamically, and I want to put an EDIT / DELETE buttons with onclick events in each row.

However, I don’t know how to make them unique with the row’s id and then make an onclick event for each so I can update/delete the values from the row.

I tried:

<INPUT TYPE='BUTTON' NAME='EDIT_PRODUCT_FROM_SEARCH' ID=".$row['alpha_p_ID']." VALUE='Delete'>

But I don’t know how to tell the event:

$('what to write here?').click(function() {

});

EDIT:

The creation of button works but the onclick event don’t. Code below:

PHP button code

results_table = "<table cellspacing='0' style='border: 1px solid #405D99'><tr bgcolor='#405D99' style='color: white'><th>Main Image</th><th>Gallery Image 1</th><th>Gallery Image 2</th><th>Name</th><th>Type</th><th>Manufacturer</th><th>Quantity</th><th>Price-Wholesale</th><th>Price-Retail</th><th>Options</th></tr>";
while($row = mysql_fetch_array($results)){
$results_table .= "<tr>";
$results_table .= "<td bgcolor='#dfe3ee'><a href='products/".$row['alpha_p_imglink_main']."' rel='lightbox'><img src='products/".$row['alpha_p_imglink_main']."' width='150px' height='150px'; border='0'/></a></td>";
$results_table .= "<td bgcolor='#dfe3ee'><a href='products/".$row['alpha_p_imglink_gal1']."' rel='lightbox'><img src='products/".$row['alpha_p_imglink_gal1']."' width='150px' height='150px'; border='0'/></a></td>";
$results_table .= "<td bgcolor='#dfe3ee'><a href='products/".$row['alpha_p_imglink_gal2']."' rel='lightbox'><img src='products/".$row['alpha_p_imglink_gal2']."' width='150px' height='150px'; border='0'/></a></td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_name_en]</td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_type]</td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_firm_owner]</td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_quantity]</td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_price_wholesale]</td>";
$results_table .= "<td bgcolor='#dfe3ee' align='center'>$row[alpha_p_price_retail]</td>";
$results_table .= "<td colspan='1' rowspan='1' bgcolor='#f7f7f7' align='center'>";
$results_table .= "<a href='#' NAME='EDIT_PRODUCT_FROM_SEARCH' ID=".$row['alpha_p_ID']." CLASS='EDIT_BUTTON_CLASS'>Edit</a>";
$results_table .= "<a href='#' NAME='DEL_PRODUCT_FROM_SEARCH' ID=".$row['alpha_p_ID']." CLASS='DELETE_BUTTON_CLASS'>Delete</a>";
$results_table .= "</tr>";
}
echo "Query: " . $query . "<br />";
$results_table .="</table>";
echo $results_table;

Onclick:

                        $('.EDIT_BUTTON_CLASS').on("click", function(event) {
                    var e_id = $(this).attr('id');
                    var p_edit_id = $('input[name=P_NAME_EDIT]');
                    (p_edit_id).val(e_id);
                    alert("aaa");
                    });

The onclick event should fill in a textbox with the id and post an alert.

Answer 1

One idea is to change

<INPUT TYPE='BUTTON' NAME='EDIT_PRODUCT_FROM_SEARCH' ID="'.$row['alpha_p_ID'].'" VALUE='Delete'>

to

echo '<INPUT TYPE="BUTTON" NAME="EDIT_PRODUCT_FROM_SEARCH" ID=".$row['alpha_p_ID']." 
onclick="your_js_delete_function('.$row['alpha_p_ID'].');" VALUE="Delete">'

then in JS

function yourj_s_delete_function(id) {
  //do something
  // you could also id = $(this).attr('id');
}

You could also assign a class so that your

$('what to write here?').click(function() {

});

becomes

$('.delete_button').click(function() {
   var id = $(this).attr('id');
   .... rest of the code
});

Note: if your $row['alpha_p_id'] returns a numeric value it’s a good practice a add a string value as a prefix as numbers only ID would cause markup validation to fail

So you would change ID="'.$row['alpha_p_ID'].'" to ID="btn_'.$row['alpha_p_ID'].'"

and you’d need to change

var id_str = $(this).attr('id');
var id=id_str.split("_", 1);

UPDATE

As you mentioned that these buttons are created dynamically – you’ll need to use on() method instead of `click –

$('.delete_button').on("click", function(event){
    alert("I am clicked!");
});

http://api.jquery.com/on/