Add or edit an element in the HTML table with JQuery

Question

I have a HTML table with some elements inside like that:

<table width='700px' id="employeetable" class="tablesorter" style='table-layout:fixed;'>
<thead>
    <tr>
        <th>Select to Edit</th>
        <th>Group Id</th>
        <th>User Id</th>
        <th>Object</th>
        <th>Read</th>
        <th>Update</th>
        <th>Insert</th>
        <th>Delete</th>
    </tr>
</thead>
<tbody>
    {foreach from=$privileges item=privilegesItem name=foo}
    <tr>
        <td align="center"><input id='{$smarty.foreach.foo.iteration}' type="radio" name="SelcetedObject" value= "{$privilegesItem['Object']}"/> </td>
        <td align="center">{$privilegesItem['group_id']}</td>
        <td align="center">{$privilegesItem['user_id']}</td>
        <td align="center">{$privilegesItem['Object']}</td>
        <td id='read_{$smarty.foreach.foo.iteration}'   align="center">{$privilegesItem['Read']}  </td>
        <td id='update_{$smarty.foreach.foo.iteration}' align="center">{$privilegesItem['Update']}</td>
        <td id='insert_{$smarty.foreach.foo.iteration}' align="center">{$privilegesItem['Insert']}</td>
        <td id='delete_{$smarty.foreach.foo.iteration}' align="center">{$privilegesItem['Delete']}</td>
    </tr>
    {/foreach}
</tbody>

I am now able to delete an element with

$("input[type='radio']:checked").each(function () {
        var id = this.id;
        var id_read = '#read_'+id;

        $(id_read).remove();

But I would like to edit the lement from the table and not to delete it. Edit: If I have for example value 10 for my Read item, I would like to chenge it to 2, or instead of having an simple value, I would like to replace it with an checkbox.

How could I do that please? With .add ?

Would you mind to post only the generated HTML source code? Thanks. — Reporter, Jun 14 '12 at 12:18
I edited my question, with edit, I mean than i can edit the value, or edit the type of element (to have an checkbox etc) — Milos Cuculovic, Jun 14 '12 at 12:22
Check this link, i think this is what you are looking for http://stackoverflow.com/questions/1224729/using-jquery-to-edit-individual-table-cells — swapnesh, Jun 14 '12 at 12:25
Is your id gives you the correct Id as per HTML generated dynamic Id? Have u check that? I am guessing you should write var id = $(this).attr('id'); — Sudip Pal, Jun 14 '12 at 12:27

score 1 · Accepted Answer · answered Jun 14 '12 at 12:22

1

If you want to change the text inside td element you can just do

$(id_read).text("Permitted") //Forbidden
$(id_read).css() //change its style

I could be of better help if you explain what you mean by "Edit"

answered Jun 14 '12 at 12:22

omerkirk

2,527
1
17
9

Thank you very much Omerkrirk, your answer helps me a lot. Do you know how can I ged the value of the text inside td element? – Milos Cuculovic Jun 14 '12 at 12:25
If you mean the thing between the open and close tabs, use innerHTML – Playmaker Jun 14 '12 at 12:28
Thank you @Playmaker, In fact, With the omerkrik answer, I am able to change the value of the element but how can I get his value or change his type, from text to checkbox? – Milos Cuculovic Jun 14 '12 at 12:33
Try the .replaceWith() api http://api.jquery.com/replaceWith/ . Something of this sort: $(this).replaceWith($('' + this.innerHTML + '')); – Playmaker Jun 14 '12 at 12:39
Great, i can transform my element in checkbox now with $(id_read).replaceWith($(' ')); Can you please help me on how to get the value of the element? – Milos Cuculovic Jun 14 '12 at 12:54
If by value you mean the text inside the td element, you can $(id_read).html() or $(id_read).text(). Glad I could help. – omerkirk Jun 14 '12 at 15:50
@Miloš It's damn late I know.. but thought of pointing out for anyone else - you can use .val() function to get value of text in textbox or 'value' tag of option selected (select/checkbox) – Playmaker Nov 08 '14 at 18:25

score 0 · Answer 2 · answered Jun 14 '12 at 13:02

A editable table sounds kinda what you mean. below would replace your data with a input to edit and then back again.

$(document).ready(function() {
    $(".tablesorter td").not(':first').on('click',null,function() {
       var data = $(this).html();
        if(!($(this).children('input').length > 0)) {
            $(this).html("<input type='text' id='focus' value='"+data+"' />").children().focus();
        }
    });

    $(".tablesorter td").on('blur','#focus',function() {
       $(this).parent().html($(this).val());
    });
});

fiddle

thank you AbstractChaos, but I don't need realy an editable table. — Milos Cuculovic, Jun 14 '12 at 13:06

Add or edit an element in the HTML table with JQuery

2 Answers2