Question

I need to implement the following functionality in JavaScript/jQuery and its driving me nutts. I have an idea how I can implement this using lots of ids. However, I need to implement this using classes because these will be dynamic and it doesn’t make sense to have a different id for every row.

Take the following table as an example:

<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>

if the checkbox of John Doe is checked, I need to show the CHANGE span for the respective clicked checkbox. Therefore, I need to add this element using jQuery. The following will be the result:

<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>

if the CHANGE span is clicked, I need to show the textbox for respective checkbox clicked. The following table will be the result:

<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>

If the John Doe checkbox is unchecked, the respective row is reverted back without the textbox and without the change span, like the first table

If more than one checkbox is clicked, the second, third and so on rows need to follow the same procedure without losing the functionality from previously clicked checkboxes.

If the CheckAll checkbox is clicked from the table header, then all rows must follow the procedure mentioned above.

I need to hear your opinions on the best practices on how to achieve this. I know the logic of it but I can’t manage to program it with JavaScript and jQuery. For instance, with jQuery, when you store an element in a string so you can manipulate it with plain JavaScript, then you don’t have simple access anymore to the DOM.

Any help would be greatly appreciated

Answer 1

Try this:

$(".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;
}

I havent tested it but I think it would help you!!