jquery表读取输入字段值

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

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

例子：

产生ROW1 =西班牙

生成行2 =巴西在2行

单击确定，ROW2的jQuery取出，在placetable =错误产生ROW1的名字！

这里的代码

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

来源

2009-06-05 elhombre

这是测试和工程...

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

来源

2009-06-05 18:29:46 KyleFarris

首先，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的网格（上述＃2）支持可编辑的细胞，且具有在网站上很好的文档和示例。我建议先看看它。

来源

2009-06-05 10:55:30 zihotki

我还没有编辑和删除部分。当我可以创建新的地方并将其正确保存到地图表中时，我会继续完成此任务。 – elhombre 2009-06-05 11:01:26

如何使用一些现有的jQuery pluguns将为您提供所有这些功能？查看答案的更新。 – zihotki 2009-06-06 03:52:39

这里有几个问题。

第一个是id。这些需要是独一无二的，特别是如果您在JavaScript中使用它们作为参考。由于您生成的行不包含任何ID，我只需将其完全删除即可。如果你真的想要他们，你可以写一些像“id ='delete_1'”这将区分它们。

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

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

如果没有帮助，请使用firebug找出为什么jquery在保存时引用了错误的行。

来源

2009-06-05 17:56:30 Rhinosaurus

jquery表读取输入字段值

回答

相关问题