Skip to content

Instantly share code, notes, and snippets.

@xerxesb
Created January 30, 2012 10:03
Show Gist options
  • Save xerxesb/1703659 to your computer and use it in GitHub Desktop.
Save xerxesb/1703659 to your computer and use it in GitHub Desktop.
Dynamic checkboxes in a table
// Given a list of table rows, I want to prepend (or append) a blank checkbox which i'll use to
// check off as i go through the rows one by one....this should work on the netbank site.
// the idea is to just keep this as a bookmarklet and run it when looking at my transaction list
// When running the snip below chrome complains "Uncaught Error: NOT_FOUND_ERR: DOM Exception 8"
javascript:$('#transactionsTableBody > tr').map(function() { this.appendChild($('<td><input type="checkbox" /></td>')) })
@liammclennan
Copy link

I think each is semantically better than map, because you are not collecting the result. Map is equivalent to linq select.

When iterating over a collection of dom elements jquery usually sets 'this' to be the dom element. The argument to appendChild is another dom element, not a jquery wrapper. Something like:

this.appendChild($('<td><input type="checkbox" /></td>').get(0));

would probably work (have not tested).

@OJ
Copy link

OJ commented Jan 30, 2012

I agree it should be each over map. You're essentially doing an Action not a Func<T> :)

@xerxesb
Copy link
Author

xerxesb commented Jan 31, 2012

right, i get you....thanks for the advice.

@liammclennan - when you say the arg to appendChild is not a JQ wrapper, you mean the jq eval returns a dom element and not a jq object? if so why does console.log($('<input>')) display [<input>] instead of <input>?

@liammclennan
Copy link

Sorry. My previous comment was nonsensical.

What I meant was that appendChild is a dom function, not a jquery function, so the argument should be a dom element. Your original code was passing it a jquery wrapper, which I think is an error. I suggested .get(0) as a way to extract the actual dom element, which would make it work. Alternatively, and probably preferably, you can use get a jquery wrapper for the row ($(this)) and then use one of the jquery functions (append, prepend, etc).

@xerxesb
Copy link
Author

xerxesb commented Jan 31, 2012

yep. thats the updated version (see above) from OJ.

Out of curiosity - any reason why its preferable that way?

@liammclennan
Copy link

liammclennan commented Jan 31, 2012 via email

@xerxesb
Copy link
Author

xerxesb commented Jan 31, 2012

yeah makes sense - thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment