elhombre elhombre - 2 months ago 7
jQuery Question

jquery table read input field value

I made a place management system where you can create, delete or edit placenames.
It's a table where in every row there is a placename an edit button and an delete button.
At the end of the table there is a "create new place" button. Now when I click on the "create new place" button then I get a new generated row where I can write the new name, cancel the operation and save the operation.

I want know to save an operation which should remove the generated content and create a new row with the name, edit and delete cells. My problem is it only works with one row but if I have two names in operation then the jquery doesnt know on which row I clicked ok to save it.

Example:

generated Row1= Spain

generated Row2= Brasil

click ok in row2, row2 removed by jquery, name of row1 generated in placetable = wrong!

Here The code

<head>
<script src="../jquery.js" type="text/javascript"></script>

$(document).ready(function() {
$(".edit").click(function() {
var id = $(this).attr("id");
alert("edit "+id);
});
$(".delete").click(function() {
var id = $(this).attr("id");
alert("delete "+id);
});
$("#newbutton").click(function() {
$("tr:last").after("<tr><td><input style='width: 80%' /></td><td class=ok>OK</td><td class=cancel>Cancel</td></tr>").ready(function() {
$(".cancel").live("click", function() {
$(this).parent().remove();
});
$(".ok").click(function() {
var name = $(this).val();
$(this).parent().remove();
$("tr .edit:last").after("<tr><td>"+name+"</td><td class=edit>edit</td><td class=delete>delete</td></tr>");
});
});
})
});
</script>
</head>
<table border=1 id=table>
<tr><th>Name</th></tr>
<tr><td>Bombai</td><td id=1 class=edit>edit</td><td id=1 class=delete>delete</td></tr>
<tr><td>London</td><td id=2 class=edit>edit</td><td id=2 class=delete>delete</td></tr>
<tr><td>Rom</td><td id=3 class=edit>edit</td><td id=3 class=delete>delete</td></tr>
</table><label id=newbutton>New Place</label>

Answer

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>
Comments