javascript - 如何单击列上的图像以编辑同一行其他列上的文本？

Question

如何单击列上的图像来编辑同一行其他列上的文本？

这是在向表中添加行之前必须完成的表单

 <form id="myForm" method="post" action="javascript:void(0);" target="_parent">

        <p>Name: 
          <input type="text" name="Name" value="" maxlength="200" size="60">
        </p>

        <p>User ID:
            <input type="text" name="UserID" value="" maxlength="200" size="60">
        </p>

        <p>Password:
            <input type="password" name="Password" value="" maxlength="200" size="60">
        </p>

        <p>Organization:
            <input type="text" name="Organization" value="" maxlength="200" size="60">
        </p>

        <p> Role:
          <select name="Role">
            <option name = "Member" selected>Member</option>
            <option name = "Admin">Admin</option>
          </select>
        </p><br />
        <p> 
          <input type="submit" name="submit" id="submit" value="Submit" onClick="closebox()">
          <input type="button" name="cancel" value="Cancel" onClick="closebox()">
        </p>
      </form>

这是我的 Jquery 函数，它向表中添加一行

$('#submit').on('click',function(){
    var st = '';
    $('#myForm input[type=text],input[type=password],select').each(function(){
        st = st+ '<td>'+$(this).val()+'</td>';
        $(this).val('');
    });
    st = st+ '<td class="status">Active</td><td><img class="pencil" src="images/pencil-black.png"></img><img class="lock" src="images/lock-black.png"></img><img class="bin" src="images/bin-black.png"></img></td>';
    $('#tablelist').append('<tr>'+st+'</tr>');
});

我要单击的图像在 img 类 pencil 下。但是我遇到的问题是我不知道如何才能选择我要编辑的列，因为我无法根据我正在使用的行添加功能给它一个类。

Answer 1

这是工作演示 http://jsfiddle.net/yeyene/xc5dT/1/

如果你需要删除和锁定，我也添加了这些功能。

$(document).ready(function(){
$('#submit').on('click',function(){
    var st = '';
    $('#myForm input[type=text],input[type=password],select').each(function(){
        st = st+ '<td>'+$(this).val()+'</td>';
        $(this).val('');
    });
    st = st+ '<td class="status">Active</td><td><img class="pencil" src="http://cdn2.iconfinder.com/data/icons/diagona/icon/16/019.png" /><img class="lock" src="http://cdn4.iconfinder.com/data/icons/sketchdock-ecommerce-icons/log-in.png" /><img class="bin" src="http://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/trash_16x16.gif" /></td>';
    $('#tablelist').append('<tr>'+st+'</tr>');
});

$(document).on('click','.pencil',function(){
    for(var i=0; i<5; i++){
        var val = $(this).parent().siblings('td').eq(i).text();
        $(this).parent().siblings('td').eq(i).html('<input type="text" width="50" value="'+val+'" />');
    }
});

$(document).on('click','.lock',function(){
    for(var i=0; i<5; i++){
        var val = $(this).parent().siblings('td').eq(i).find('input').val();
        $(this).parent().siblings('td').eq(i).html(val);
    }
});    

$(document).on('click','.bin',function(){
    $(this).parent().parent('tr').remove();
});

});