如何单击列上的图像以编辑同一行其他列上的文本?
这是将行添加到表之前必须完成的表单
<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类(铅笔)下。但是我遇到的问题是我不知道如何选择要编辑的列,因为我无法根据正在使用的行添加功能为其提供类。
最佳答案
这是有效的DEMO 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();
});
});
关于javascript - 如何单击列上的图像以编辑同一行其他列上的文本?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17480701/