jquery live 和change问题

html：
<table align="center" border="1px" id="add_info">
<tr>
     <th>ID</th>
        <th>产品名称</th>
        <th>价格</th>
        <th>操作</th>
    </tr>
    <tr class="change">
     <td>1</td>
        <td>sdfsd</td>
        <td>sfsdf</td>
        <td><a href="#">编辑</a></td>
    </tr>
</table><form class="form" style="text-align:center">
ID:<input type="text"/>
产品名称:<input type="text"/>
价格:<input type="text"/>
<input type="button"  value="save"/>
</form>jquery1.5：
$(".change tr a").live("click", function(){
$(this).find("td").each(function(i){
$("form>input").eq(i).val($(this).text())
})
})

如何使table里面内容输出到指定的input里面上面代码不行  还有如何使修改的input更新到table的内容

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

多的不说了，直接上代码
http://jsfiddle.net/q25rM/
1.首先要学会 jquery 的选择器
$('.change tr a')  ---> $('tr.change a') 或者 $('.change td a')
空格是下一层或者子层的意思，如果是同一层的选择，不能用空格隔开。
2.还有就是编辑的意思是修改原来的那一行，还是新增一行？
如果是新增，则需要新增一个tr元素，且含有同样的结构。
如果是修改，则不需要live，直接替换原先的值就可以了。
$("tr.change a").live("click", function(){
    var $tr =  $(this).closest('tr');
    var $td_list = $tr.children();
    var id = $td_list.eq(0).text();
    var name = $td_list.eq(1).text();
    var price = $td_list.eq(2).text();    $input_list = $('form input:text');
    $input_list.eq(0).val(id);
    $input_list.eq(1).val(name);
    $input_list.eq(2).val(price);
});
点击编辑 save保存后更新修改上面的内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
  <script type="text/javascript">
var nowa;
var sv=new Array();
$(function(){
$("tr.change a").click(function(){
nowa=$(this).parent().parent();
$(this).parent().parent().find("td").each(function(i){
//alert(i);
sv[i]=$(this).text();
}) $("form input:not(:button)").each(function(i){
$(this).val(sv[i]);
})
}) $("#save").click(function(){
if(nowa!=null){
nowa.find("td:lt(3)").each(function(i){
$(this).text($("form>input").eq(i).val());
})
}
})
})
</script>
</HEAD> <BODY>
  <table align="center" border="1px" id="add_info">
<tr>
  <th>ID</th>
  <th>产品名称</th>
  <th>价格</th>
  <th>操作</th>
</tr>
<tr class="change">
  <td>1</td>
  <td>sdfsd</td>
  <td>sfsdf</td>
  <td><a href="#">编辑</a></td>
   </tr>
    <tr class="change">
  <td>2</td>
  <td>dsf</td>
  <td>tttt</td>
  <td><a href="#">编辑</a></td>
   </tr>
</table><form class="form" style="text-align:center">
ID:<input type="text"/>
产品名称:<input type="text"/>
价格:<input type="text"/>
<input id="save" type="button" value="save"/>
</form>
</BODY>
</HTML>
看看先
http://jsfiddle.net/q25rM/5/
如何把添加或修改后的内容加入到josn里面如
var products=[{ID:1,Name:"a",Price:1},{ID:2,Name:"b",Price:4}];
如何把添加或修改后的内容加入到josn里面如
var products=[{ID:1,Name:"a",Price:1},{ID:2,Name:"b",Price:4}];
加新的值：
var obj = new Object();
obj.ID = 12;
obj.Name = "abc";
obj.Price = 10;
products.push(obj);修改就麻烦点，循环products，找到对象后更新数据就好。
一个josn  数据绑定到表格然后可以更新表格添加表格数据  不过内容最好是更新josn里面的内容
josn 绑定---table表格 -----表格修改------更新josn-----绑定显示出表格------添加----更新josn-----绑定显示出表格
数据从input的text 里面获取
json数据从ajax拿到
存到页面变量 ProductsJson
然后可以考虑用点客户端template来绑定这些json数据到表格，有很多选择jtemplate, pure template, jquery template, micro templte .........然后，修改一行数据的话，就可以像之前那样，取出一行数据，点击"Save"，如果要求同时更新数据库的数据的话，也可以用ajax,在success里面更新ProductsJson,然后重新绑定表格，或者直接修改相映td里面的内容增加一行数据的话相似做法，在点击"Save"时，ajax call更新数据库数据，在success里面往ProductsJson里面加一条数据，最后重新绑定表格