如何将onclick事件添加到动态生成的按钮并显示/隐藏表

I have many buttons generating dynamically based on end user request

$out='<input class="show_hide" type="button" id="'.$platform_name.'" value="'.$platform_name.'"/>';

the same variable name tables also coming dynamically

$out.='<table id="'.$platform_name.'" > </table>

if suppose button

<input class="show_hide" type="button" id="button1'" value="button1"/> 
<table id="button1" > </table>

how to get the number of button names/id, and based on button name/id finding table and show/ hide the table. Please help me. i am fresher in php

The id should be unique in your HTML. E.g.

<input class="show_hide" type="button" id="button1'" value="button1"/> 
<table id="table1"></table>

Then, you can 'choose' either the button or the table with jQuery using:

$('#button1')
$('#table1')

E.g.

for (var i = 1; i <= numberOfTables; i++) {
    $('#button' + i).click(function() {
        $('#table' + i).hide();
    });
}

If you want to add event handler dynamically to element, ensure that you can have id for that element, you can do using plain javascript,

elemm.onclick = function() { alert('blah'); };

where elemm = document.getElementById("button1")

try like this using delegate:

all button click event:

$(document).on( ".show_hide", "click", function() {
 //all button click
})

for the table use wildcart:

   $(document).on( "[id^=table]", "click", function() {
     //all table click
    })

you also use wildcart for button also like this:

 $(document).on( "[id^=button]", "click", function() {
         //all table click
        })

As others have said, id's must be unique. Your button and table can't have the same id. But you can use the value of your button to find the associated table:

$out='<input class="show_hide" type="button" value="'.$platform_name.'"/>';

Since the buttons are dynamic, you don't know the ids of all of the buttons, but you can use the jQuery class selector to find all buttons with the show_hide class and apply a function to the click event:

$("input.show_hide").on('click', function () {
    // get the id of the table associated with the button
    var tableId = $(this).val(),

    // toggle your table between hide and shown
    $("#" + tableId).toggle();

});

If your tables can be added dynamically AFTER the page loads, you will have to use a delegate for defining the click event:

$(document).on( ".show_hide", "click", function() {
    .. same code goes here
});

when it comes to dynamic binding, go for delegates

$( "body" ).on( "click", ".show_hide", function() {
    $( this ).next().toggle();
});

OR you can provide selector in sibling selection

$( "body" ).on( "click", ".show_hide", function() {
    $( this ).next("#table1").toggle();
});

this code will hide/show the next sibling(in your case a table) on button click with class show_hide