Question

我需要在JavaScript / jQuery中实现以下功能，并且它驱使我坚果。我知道如何使用大量的ID实现这一点。但是，我需要使用类来实现它，因为这些是动态的，并且每行都有不同的id是没有意义的。

以下表为例：

<table>
    <thead>
        <tr>
            <th><input type="checkbox" name="Names" value="CheckAll" /></th>
            <th>Name</th>
            <th>Surname</th>
            <th>Location</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name1" /></td>
            <td>John</td>
            <td>Doe</td>
            <td class="changable"><span class="location">UK</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name2" /></td>
            <td>Jayne</td>
            <td>Doe</td>
            <td class="changable"><span class="location">Scotland</span></td>
        </tr>
    </thead>
</table>

如果选中了John Doe的复选框，我需要显示相应单击复选框的CHANGE范围。因此，我需要使用jQuery添加此元素。结果如下：

<table>
    <thead>
        <tr>
            <th><input type="checkbox" name="Names" value="CheckAll" /></th>
            <th>Name</th>
            <th>Surname</th>
            <th>Location</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td>
            <td>John</td>
            <td>Doe</td>
            <td class="changable"><span class="location">UK</span>&nbsp;<span class="defaultLocation">Change</span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name2" /></td>
            <td>Jayne</td>
            <td>Doe</td>
            <td class="changable"><span class="location">Scotland</span></td>
        </tr>
    </thead>
</table>

如果单击CHANGE范围，我需要显示单击的相应复选框的文本框。结果如下表所示：

<table>
    <thead>
        <tr>
            <th><input type="checkbox" name="Names" value="CheckAll" /></th>
            <th>Name</th>
            <th>Surname</th>
            <th>Location</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name1" checked="checked" /></td>
            <td>John</td>
            <td>Doe</td>
            <td class="changable"><span class="location">UK&nbsp;<input type="text" /></span></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="Names" value="Name2" /></td>
            <td>Jayne</td>
            <td>Doe</td>
            <td class="changable"><span class="location">Scotland</span></td>
        </tr>
    </thead>
</table>

如果未选中John Doe复选框，则相应的行将在没有文本框且没有更改范围的情况下还原，如第一个表

如果单击多个复选框，则第二个，第三个等行必须遵循相同的过程，而不会丢失先前单击的复选框的功能。

如果从表头中单击CheckAll复选框，则所有行都必须遵循上述步骤。

我需要听取您对如何实现这一目标的最佳实践的意见。我知道它的逻辑，但我无法用JavaScript和jQuery编程。例如，使用jQuery，当您将元素存储在字符串中以便可以使用纯JavaScript操作它时，您就不再具有对DOM的简单访问权限。

非常感谢任何帮助

Answer 1

试试这个：

$(".myClass").click(function(){
  if(this.checked){
     var changeElement = getChangeElement()
     $(this).parents('tr').children('.changable').append($(changeElement))
     attachEventsToCHANGE()
  }else{
     $(this).parents('tr').children('.changable .defaultLocation').remove()
  }
})

function getChangeElement(){
   var changeElement= $("<span class='defaultLocation'>Change</span>")
     $(changeElement).click(function(){
      $(this).after("<input type='text' />")
      $(this).remove()
   })
   return changeElement;
}

我没有测试过，但我认为它会对你有所帮助!!

Answer 2

你可能绑定到所有复选框的“已更改”事件。在Eventhandler中你可以做一些

的事情

function changeHandler(event) {
 if ($(this).val('checked') == checked) {
  $(this).parents('tr').children('.changeable').append('<span>bla<span>');
 } else {
  $(this).parents('tr').children('.defaultLocation').remove();
}

“更改”跨度的点击处理程序应该非常简单。

使用JavaScript / jQuery操作表

2 个答案: