I tried to append a table row to a table by clicking on a button. And
inside the table, I put a link so i can click that and remove the row.
I was using jquery.flydom plugin, by the way.
The HTML looks like:
============HTML==============
<table id="PE_Template">
  <tr>
    <th><a class="removeRow" href="#"><img  src="images/12-em-
cross.png" alt="Delete this row" /></a></th>
    <td><input type="text" name="label" id="label0" value="" /></td>
    <td><input type="text" name="weightage" id="weightage0" value="" /
></td>
    <td><textarea name="description" id="description0>" cols="30"
rows="2"></textarea></td>
  </tr>
</table>
<input type="button" class="add-row" />
===============================

==============JS===============
        $(document).ready(function(){
                $(".removeRow").click(function(){
                        $(this).parents('tr').remove();
                        return false;
                });

                $(".add-row").click(function(){
                        $("#PE_Template tbody").createAppend(
                                'tr',{},[
                                        'th',{},[
                                                'a',{className: 'removeRow', 
href: '#'},[
                                                        'img',{name: 'Delete 
this row', src: 'images/12-em-cross.png',
alt: 'Delete this row'},[],
                                                ],
                                        ],
                                        'td',{},[
                                                'input',{type: 'text', 
name:'label'},[],
                                        ],
                                        'td',{},[
                                                                'input',{type: 
'text', name:'weightage'},[],
                                        ],
                                        'td',{},[
                                                                
'textarea',{name:'description', cols:'30', rows:'2'},[],
                                        ],
                                ]
                        );
                        return false;
                });
        });
===============================

I also tried to append the table row with the non-flydom code:

==============JS===============
$("#PE_Template tbody").append([
                                "<tr>",
                                                "<th>","<a class='removeRow' 
href='#'><img name='' src='images/
12-em-cross.png' alt='Delete this row' /></a>","</th>",
                                                "<td><input type='text' 
name='label' value='' /></td>",
                                                "<td><input type='text' 
name='weightage' value='' /></td>",
                                                "<td><textarea 
name='description' cols='30' rows='2'></
textarea></td>",
                                "</tr>"
                        ].join(""));
===============================

But the result is that the rows generated by the JS cannot be removed.

Can someone help me solve the problem?
Thanks!

C1412

Reply via email to