ansaurus

Question

Answer 1

+2 A:

First of all, id - must be unique within the page!
How are you editing your rows? There are no such code here. Could you add it too?
And small tip, you can mark selected row with some class ('editing') on edit click (but before you should remove this class from any other row) and this will help you to find out which row is in editing state.

EDIT: Also you can use one of the existing plugins:

* Flexigrid: http://flexigrid.info/
* jQuery Grid: http://www.trirand.com/blog/
* jqGridView: http://plugins.jquery.com/project/jqGridView
* Ingrid: http://reconstrukt.com/ingrid/

jQuery Grid (#2 above) supports editable cells, and has very good documentation and samples on the website. I recommend to have a look at it at first.

zihotki 2009-06-05 10:55:30

I havent yet made the edit and delete part. When I can create new places which are saved correctly into the placetable, then I will go over to this task.

elhombre 2009-06-05 11:01:26

What about to use some existing jQuery pluguns which will provide you with all this functionality? Check out update of the answer.

zihotki 2009-06-06 03:52:39

Thank you for giving me a well structured plugin list i am going to check them out!If there is no way around the problem without a plugin then I will take these into consideration. I know that they can help you to get rid of very much work but I wan't to use as little as possible the plugins so that other people don't have to learn new syntax of plugins or get disorted when looking at my code ;)

elhombre 2009-06-08 09:20:20

Answer 2

+1 A:

There are a few issues going on here.

The first is the id's. These need to be unique especially if your using them as references in your javascript. Since your generated rows don't include any id's anyways, I would just remove those completely. If you really want them though, you can write something like "id='delete_1'" which will differentiate them.

Second, you're using the live callback binding function within a click callback function. This means that every time you click the "new" button, it tries to bind your callbacks again. I'm not 100% sure that there's a side-effect for doing this way, but the reason for 'live' is that it will automatically bind the callback to any generated html so you don't have to do it manually.

I would recommend moving the ".cancel" and ".ok" click binding calls outside that one function. Bind the ".ok" click callback using live. After you've made these changes it might help with your problem.

If it doesn't help, use firebug to figure out why jquery is referencing the wrong row on save.

Rhinosaurus 2009-06-05 17:56:30

Answer 3

+2 A:

This is tested and works...

Your jquery logic was kind of off. I hope this gets you to understand it a bit better... ;-)

<script type="text/javascript" language="javascript">

$(function() {
  $(".edit").live('click',function() {
    var item = $(this).attr("rel");
    alert("edit "+item);
    return false;
  });
  $(".delete").live('click',function() {
    var item = $(this).attr("item");
    alert("delete "+id);
    return false;
  });
  $(".cancel").live("click", function() {
    $(this).parent().remove();
    return false;
  });
  $(".ok").live('click',function() {                      
    var name = $(this).parent().siblings().find('input[type="text"]').val();
    $(this).parent().parent().remove();
    $("tr:last").after("<tr><td>"+name+"</td><td><a href='#' class='edit'>edit</a></td><td><a href='#' class='delete'>delete</a></td></tr>");
    return false;
  });
  $("#newbutton").click(function() {
    $("tr:last").after("<tr><td><input type='text' style='width: 80%' /></td><td><input type='button' class='ok' value='OK' /></td><td><input type='button' class='cancel' value='Cancel' /></td></tr>")
  })
}); 
</script>
</head>
<body>
<table border="1" id="table">
    <tr><th>Name</th></tr>
    <tr>
        <td>Bombai</td>
        <td rel="1"><a href="#" class="edit">edit</a></td>
        <td rel="1"><a href="#" class="delete">delete</a></td>
    </tr> 
    <tr>
        <td>London</td>
        <td rel="2"><a href="#" class="edit">edit</a></td>
        <td rel="2"><a href="#" class="delete">delete</a></td>
    </tr> 
    <tr>
        <td>Rom</td>
        <td rel="3"><a href="#" class="edit">edit</a></td>
        <td rel="3"><a href="#" class="delete">delete</a></td>
    </tr> 
</table>
<button id="newbutton">Add New Place</button>

KyleFarris 2009-06-05 18:29:46

Thank you very much for helping me with a complete solution, I appreciate it very much!I have made now three new rows with your script but when I click OK they appear at the end of the table. Isn't there a way to make them appear at the end of the editable rows. I tried to change $("tr:last") to $("tr .edit:last") but then when I click OK the rows wont appear :( Do you have maybe a solution to this problem?

elhombre 2009-06-08 09:08:58

ansaurus

tags:

views:

answers:

jquery table read input field value

related questions