如何在单击同一行中另一个单元格中的图像时替换特定单元格上的单词？

Question

如何在点击同一行中另一个单元格中的图像时替换特定单元格上的单词？

这是在表单完成时向表中添加新行的代码：

$('#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>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>');
});

我想要做的是点击图像“锁定”，它会将“活动”改为“阻止”（粗体和红色）。我目前面临的问题是如何告诉函数只能查看图像所在的行并替换该单词？

Answer 1

使用jquery，首先将类添加到包含Text Active的td，即class =“status”：

$(".lock").click(function(){

  $(".status",$(this).parent().parent()).html("Blocked");
});

Answer 2

这样可行（将class="status"添加到td，其中包含Active）：

$(".lock").click(function () {
   $(this).parent().parent().find(".status").html("Blocked");
});