JQuery таблицы чтения значения поля ввода - PullRequest
1 голос
/ 05 июня 2009

Я создал систему управления местами, где вы можете создавать, удалять или редактировать названия мест. Это таблица, в которой в каждой строке есть название места, кнопка редактирования и кнопка удаления. В конце таблицы есть кнопка «Создать новое место». Теперь, когда я нажимаю кнопку «Создать новое место», я получаю новую сгенерированную строку, в которой я могу написать новое имя, отменить операцию и сохранить операцию.

Я хочу знать, чтобы сохранить операцию, которая должна удалить сгенерированный контент и создать новую строку с именем, редактировать и удалять ячейки. Моя проблема заключается в том, что он работает только с одной строкой, но если у меня в работе два имени, jquery не знает, в какой строке я щелкнул, чтобы сохранить его.

Пример:

сгенерированный Row1 = Испания

сгенерированный Row2 = Бразилия

нажмите кнопку ОК в строке 2, строка 2 удалена с помощью jquery, имя строки 1 сгенерировано в placetable = неправильно!

Здесь код

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

Ответы [ 3 ]

2 голосов
/ 05 июня 2009

Это проверено и работает ...

Ваша логика jquery была отчасти отключена. Я надеюсь, что это поможет вам понять это немного лучше ...; -)

<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>
2 голосов
/ 05 июня 2009

Прежде всего, id - должен быть уникальным на странице!
Как вы редактируете свои строки? Здесь нет такого кода. Не могли бы вы добавить это тоже?
И небольшой совет: вы можете пометить выбранную строку некоторым классом («редактирование») по нажатию кнопки редактирования (но перед тем, как удалить этот класс из любой другой строки), и это поможет вам узнать, какая строка находится в состоянии редактирования. *

EDIT: Также вы можете использовать один из существующих плагинов:

* 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 выше) поддерживает редактируемые ячейки и имеет очень хорошую документацию и примеры на веб-сайте. Я рекомендую сначала взглянуть на это.

1 голос
/ 05 июня 2009

Здесь происходит несколько проблем.

Первый - это идентификатор. Они должны быть уникальными, особенно если вы используете их в качестве ссылок в своем JavaScript. Так как ваши сгенерированные строки не содержат никаких идентификаторов, я бы просто удалил их полностью. Если вы действительно хотите их, вы можете написать что-то вроде "id = 'delete_1'", что будет отличать их.

Во-вторых, вы используете функцию привязки прямого обратного вызова в функции обратного вызова щелчком. Это означает, что каждый раз, когда вы нажимаете кнопку «новый», он пытается связать ваши обратные вызовы снова. Я не уверен на 100%, что у этого способа есть побочный эффект, но причина «живой» заключается в том, что он автоматически связывает обратный вызов с любым сгенерированным html, поэтому вам не придется делать это вручную.

Я бы порекомендовал переместить вызовы привязки кликов ".cancel" и ".ok" за пределы этой одной функции. Привязать обратный вызов «.ok», используя live. После внесения этих изменений это может помочь решить вашу проблему.

Если это не поможет, используйте firebug, чтобы выяснить, почему jquery ссылается на неправильную строку при сохранении.

...