Manipulating a table with JavaScript/jQuery

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

Make your question more concise dude

Jahan Zinedine
– Jahan Zinedine

2010-12-10 11:34:44 +00:00
Commented Dec 10, 2010 at 11:34 — Jahan Zinedine
– Jahan Zinedine, Commented Dec 10, 2010 at 11:34

Chandan007 · Accepted Answer · 2010-12-10 11:43:45Z

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

answered Dec 10, 2010 at 11:43

Chandan007

363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

seedg Over a year ago

Thanks it worked great. However, when I uncheck the checkbox, the textbox and/or span button are not being reverted back. Any ideas?

Seb · Accepted Answer · 2010-12-10 11:36:56Z

0

You could probably bind to the "changed" Event of all checkboxes. Within the Eventhandler you could probably do something along the lines of

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

The click handler of the "Change" Span should be pretty straight forward.

answered Dec 10, 2010 at 11:36

Seb

1061 silver badge6 bronze badges

Collectives™ on Stack Overflow

Manipulating a table with JavaScript/jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related