jquery + редактирование строки таблицы - проблема с строкой

Question

У меня есть одна проблема с редактированием строки ... Я хотел использовать кнопку для входа в режим редактирования таблицы (сгенерированный из массива php (данные взяты из mysql))

У меня есть две строкидля каждого из данных:

                <tr class="dataline">
                    <td><?=$row->id; ?></td>
                    <td><?=$row->pl>0 ? '<div id="gain">' . $row->pl .'</div>' : '<div id="loss">' . $row->pl . '</div>';?></td>
                    <td><div id="reason"><?=$row->reason;?></div></td>
                    <td><div id="comment"><?=$row->comment;?></div></td>
                    <td><div id="date"><?=$row->cdate; ?><br /><?=$row->ctime; ?></div></td>
                    <td><div id="date"><?=$row->mdate; ?><br /><?=$row->mtime; ?></div></td>
                    <td colspan="2"><button id="editlink">Edit</button>
                    <button id="deletelink">Delete</button></td>
                </tr>
                <tr class="editline" style="display:none;">
                    <form id="<?php echo $row->id;?>">
                    <td><?php echo $row->id; ?><input type="hidden" name="id" id="id" value="<?php echo $row->id;?>" /></td>
                    <td><input type="text" id="pl" name="pl" value="<?=$row->pl;?>" /></td>
                    <td><textarea id="reason" name="reason"><?=$row->reason;?></textarea></td>
                    <td><textarea id="comment" name="comment"><?=$row->comment;?></textarea></td>
                    <td><div id="date"><?=$row->cdate; ?><br /><?=$row->ctime; ?></div></td>
                    <td><div id="date"><?=$row->mdate; ?><br /><?=$row->mtime; ?></div></td>
                    <td colspan="2"><input id="edit_save" type="Submit" value="Save" />
                    </form>
                    <button id="cancellink">Cancel</button></td>
                </tr>

Я прикрепил к нему два оператора jquery ...

1st.один ... меняет строку на

    $("#editlink").click(function() {
        var datapos = $(this).parent().parent().prevAll().length;
        var editpos = datapos + 1;

        $("#data_table tbody tr:eq(" + datapos + ")").hide();
        $("#data_table tbody tr:eq(" + editpos + ")").show();
    });

отлично работает.

2-й.Предположим, что вы сохранили (скрипт POST to PHP) после внесения изменений и перезагрузили страницу.

    $("#edit_save").click(function() { 
        var dataString = $("form").serialize();

        var editpos = $(this).parent().parent().prevAll().length;
        var datapos = editpos - 1;

        $.ajax({
            type: "POST",
            url: "edit",
            data: dataString,
            success: function() {
                $("#lightbox").fadeIn(900);
                $("#notification-box").show();
                $("#notification-box").html("<img src='<?php base_url();?>img/notification.gif'><p>Saving</p>");

            location.reload();
            }
        });
    });

Итак, проблема, с которой я столкнулся, заключается в том, что dataString - это значение всех значений, сгенерированных в таблице, а не конкретной строки, которую я хотел отредактировать.

Я был бы очень рад, если бы кто-нибудь мог мне помочь с этим.

Приветствия,

/ Jacek

Answer 1

$("form") будет извлекать все <form> элементы на странице, вам нужно нажать родительскую форму кнопки: $(this).parent('form'):

var dataString = $(this).parent('form').serialize();