Question

我制作了一个场所管理系统，您可以在其中创建，删除或编辑场所名称。这是一个表格，每一行都有一个地名，一个编辑按钮和一个删除按钮。在表的末尾有一个“创建新地方”按钮。现在当我点击“创建新地点”按钮时，我会得到一个新生成的行，我可以在其中写入新名称，取消操作并保存操作。

我想知道保存一个操作，该操作应该删除生成的内容并创建一个带有名称，编辑和删除单元格的新行。我的问题是它只适用于一行，但如果我有两个名称在操作，那么jquery不知道我点击哪一行确定保存它。

示例：

生成Row1 =西班牙

生成Row2 = Brasil

在第2行中单击确定，在jquery中删除第2行，在placetable中生成的第1行的名称=错误！

这里是代码

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

首先，id - 在页面中必须是唯一的！
你是如何编辑你的行的？这里没有这样的代码。你也可以添加它吗？小提示，你可以在编辑点击时用一些类（'编辑'）标记选定的行（但在你应该从任何其他行中删除这个类之前）这将帮助你找出哪一行处于编辑状态。

编辑：您还可以使用现有插件之一：

* 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）支持可编辑单元格，并且在网站上有非常好的文档和示例。我建议首先看看它。

Answer 2

经过测试并有效......

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

Answer 3

这里有一些问题。

第一个是id。这些必须是唯一的，特别是如果您在javascript中使用它们作为参考。由于您生成的行无论如何都不包含任何id，我只想完全删除它们。如果你真的想要它们，你可以写一些像“id ='delete_1'”这样的东西来区分它们。

其次，您在单击回调函数中使用实时回调绑定功能。这意味着每次单击“新建”按钮时，它都会尝试再次绑定您的回调。我并不是100％确定这样做会产生副作用，但“实时”的原因是它会自动将回调绑定到任何生成的html，因此您不必手动执行。

我建议在一个函数之外移动“.cancel”和“.ok”点击绑定调用。使用live绑定“.ok”单击回调。完成这些更改后，它可能有助于解决您的问题。

如果它没有帮助，请使用firebug来找出jquery在保存时引用错误行的原因。

jquery表读取输入字段值

3 个答案: