SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Oct 2001
    Location
    USA
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bulk edit column of table data with one "switch"

    I have been looking around but I am hard pressed to find a good example of an application that allows you to bulk edit an entire column of a table based on some switch. What I mean is... we all know how there could be a "check all" box at the top of a table column which selects all the check boxes in the rows below... where could I see a good example of a similar effect where you could enter a string into a text field or select an option from a select menu and have it populate the rows under it?

    I am not worried about how to do it as much as I am about seeing actual working examples and good usability practice. Hope this makes sense ;-) thanks in advance.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    This could do with a bit of refactoring, but it does the job quite well.

    Code css:
    .editall {
    	text-align: center;
    }

    Code html4strict:
    <table id="song-list">
    	<tr>
    		<th>&nbsp;</th>
    		<th id="album-title">Album Title</th>
    		<th id="album artist">Album Artist</th>
    		<th id="year">Year</th>
    		<th id="title">Title</th>
    		<th id="artist">Artist</th>
    		<th id="track">Track</th>
    		<th id="cd">CD</th>
    	</tr>
    	<tr class="editall">
    		<td>Edit all</td>
    		<td headers="album-title"><input type="checkbox" name="editall"></td>
    		<td headers="album-artist"><input type="checkbox" name="editall"></td>
    		<td headers="year"><input type="checkbox" name="editall"></td>
    		<td headers="title">&nbsp;</td>
    		<td headers="artist"><input type="checkbox" name="editall"></td>
    		<td headers="track">&nbsp;</td>
    		<td headers="cd"><input type="checkbox" name="editall"></td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td headers="album-title"><input type="text" name="albumtitle[]"></td>
    		<td headers="album-artist"><input type="text" name="albumartist[]"></td>
    		<td headers="year"><input type="text" name="year[]"></td>
    		<td headers="title"><input type="text" name="title[]"></td>
    		<td headers="artist"><input type="text" name="artist[]"></td>
    		<td headers="track"><input type="text" name="track[]"></td>
    		<td headers="cd"><input type="text" name="cd[]"></td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td headers="album-title"><input type="text" name="albumtitle[]"></td>
    		<td headers="album-artist"><input type="text" name="albumartist[]"></td>
    		<td headers="year"><input type="text" name="year[]"></td>
    		<td headers="title"><input type="text" name="title[]"></td>
    		<td headers="artist"><input type="text" name="artist[]"></td>
    		<td headers="track"><input type="text" name="track[]"></td>
    		<td headers="cd"><input type="text" name="cd[]"></td>
    	</tr>
    	<tr>
    		<td>&nbsp;</td>
    		<td headers="album-title"><input type="text" name="albumtitle[]"></td>
    		<td headers="album-artist"><input type="text" name="albumartist[]"></td>
    		<td headers="year"><input type="text" name="year[]"></td>
    		<td headers="title"><input type="text" name="title[]"></td>
    		<td headers="artist"><input type="text" name="artist[]"></td>
    		<td headers="track"><input type="text" name="track[]"></td>
    		<td headers="cd"><input type="text" name="cd[]"></td>
    	</tr>
    </table>

    Place this script at the end of the body, just before the </body> tag.

    Code javascript:
    function forEachSongInput(fn) {
    	var songlist = document.getElementById('song-list');
    	var els = songlist.getElementsByTagName('input');
    	var el;
    	var i;
    	for (i = 0; i < els.length; i += 1) {
    		fn(els[i], i);
    	}
    }
    function duplicateKey() {
    	var column = this.parentNode.headers;
    	var text = this.value;
    	forEachSongInput(function (el) {
    		if (el.parentNode.headers === column) {
    			el.value = text;
    		}
    	});
    }
    function editall() {
    	var column = this.parentNode.headers;
    	var checked = this.checked;
    	forEachSongInput(function (el) {
    		if (el.parentNode.headers === column) {
    			if (checked === true) {
    				el.onkeyup = duplicateKey;
    			} else {
    				el.onkeyup = null;
    			}
    		}
    	});
    }
    forEachSongInput(function (el) {
    	if (el.name === 'editall') {
    	    el.onclick = editall;
    	}
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Oct 2001
    Location
    USA
    Posts
    760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I should have been more clear. I am looking for working examples of this type of behavior in current applications. I know how to do it, I just want to see how others use it and the context in which they use it in. I am more worried about usability and best practices here. Thanks in advance.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •