i have html file containing table rows n columns. each row contain button, has functions. first, has submit data in row php file, not printing anything. button have change text , text in column 5 of corresponding row. change text effect of button working well. change text effect of column 5 buggy. text of column5 in first row changing, no matter button click.. can fix problem me??
thanks in advance :)
blasteralfred
<head> <title></title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style> .style1 { background-color: #c3d9ff; font-family:arial,sans-serif; } .style2 { text-align: center; font-weight: bold; } .style3 { background-color: #ffffff; font-family:arial,sans-serif; text-align: center; font-weight: bold; } body { font-family:verdana, arial, helvetica, sans-serif; font-size:15px; background-color: ; } .delete_button { font-weight:bold; float:right; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { $(".delete_button").click(function() { var id = $(this).attr("id"); var datastring = 'id='+ id ; var parent = $(this).parent().parent(); $.ajax({ type: "post", url: "del.php", data: datastring, cache: false, success: function() { if(id % 2) { parent.fadeout('fast', function() {$(this).fadeout();$(this).fadein();}); } else { parent.fadeout('fast', function() {$(this).fadeout();$(this).fadein();}); } } }); return false; } );}); $(document).ready(function() { $('.delete_button').click(function() { $(this).text($(this).text() == 'inactivate' ? 'activate' : 'inactivate'); $("#clickme2").text($("#clickme2").text() == 'inactive' ? 'active' : 'inactive'); return false; }); }); </script> </head> <body> <table style="width: 90%" align="center" class="style1"> <tr> <td colspan="7" class="style2">manager</td> </tr> <tr> <td class="style3" style="width: 139px">column1</td> <td class="style3" style="width: 139px">column2</td> <td class="style3" style="width: 139px">column3</td> <td class="style3" style="width: 139px">column4</td> <td class="style3" style="width: 139px">column5</td> <td class="style3" style="width: 144px">column6</td> <td class="style3" style="">action</td> </tr> <tr> <td class="style3" style="width: 139px">msg1</td> <td class="style3" style="width: 139px">msg2</td> <td class="style3" style="width: 139px">msg3</td> <td class="style3" style="width: 139px">msg4</td> <td div id="clickme2" class="style3" style="width: 139px">inactive</td> <td class="style3" style="width: 144px">msg6</td> <td style="width: "> <button class="delete_button" style="width:80px;height:">activate</button> </td> </tr> <tr> <td class="style3" style="width: 139px">msg1</td> <td class="style3" style="width: 139px">msg2</td> <td class="style3" style="width: 139px">msg3</td> <td class="style3" style="width: 139px">msg4</td> <td div id="clickme2" class="style3" style="width: 139px">inactive</td> <td class="style3" style="width: 144px">msg6</td> <td style="width: "> <button class="delete_button" style="width:80px;height:">activate</button> </td> </tr> <tr> <td class="style3" style="width: 139px">msg1</td> <td class="style3" style="width: 139px">msg2</td> <td class="style3" style="width: 139px">msg3</td> <td class="style3" style="width: 139px">msg4</td> <td div id="clickme2" class="style3" style="width: 139px">inactive</td> <td class="style3" style="width: 144px">msg6</td> <td style="width: "> <button class="delete_button" style="width:80px;height:">activate</button> </td> </tr> <tr> <td class="style3" style="width: 139px">msg1</td> <td class="style3" style="width: 139px">msg2</td> <td class="style3" style="width: 139px">msg3</td> <td class="style3" style="width: 139px">msg4</td> <td div id="clickme2" class="style3" style="width: 139px">inactive</td> <td class="style3" style="width: 144px">msg6</td> <td style="width: "> <button class="delete_button" style="width:80px;height:">activate</button> </td> </tr> <tr> <td class="style3" style="width: 139px">msg1</td> <td class="style3" style="width: 139px">msg2</td> <td class="style3" style="width: 139px">msg3</td> <td class="style3" style="width: 139px">msg4</td> <td div id="clickme2" class="style3" style="width: 139px">inactive</td> <td class="style3" style="width: 144px">msg6</td> <td style="width: "> <button class="delete_button" style="width:80px;height:">activate</button> </td> </tr> <tr> <td class="style3" style="width: 139px">msg1</td> <td class="style3" style="width: 139px">msg2</td> <td class="style3" style="width: 139px">msg3</td> <td class="style3" style="width: 139px">msg4</td> <td div id="clickme2" class="style3" style="width: 139px">inactive</td> <td class="style3" style="width: 144px">msg6</td> <td style="width: "> <button class="delete_button" style="width:80px;height:">activate</button> </td> </tr> </table> </body>
you using id multiple times (this invalid, , not allowed in html specs). when target first 1 only.
use clickme2 class instead of id , target click handler this
$(this).closest('tr').find('.clickme2').text(...);
also, remove div attribute td tags not exists either.
example @ http://www.jsfiddle.net/gaby/23kew/
Comments
Post a Comment