Q:

Create a jQuery table with individual cell icons

I have a jQuery created table, that has a different icon for each row.
The icons are set in CSS.
I want to change this so each cell has its own icon.
I wish to be able to be able to change the icon with code and keep it displayed until it is changed again.
Aside from creating the code to change the icon what changes will I need to make to the table and CSS so this can happen?
Maybe set each icon in CSS and use code to override this?
Maybe set an ID or each cell?
Maybe store each icon filename as a key/value pair in local storage?
What changes would I need to make to the table code?
Do I need to completely rethink the table creation method?
I want to try and use best practice for this as it will be an important feature.
The jQuery table code:
// create table
var $table = $('<table>');
$table.append()

//tbody
var $tbody = $table.append('<tbody />').children('tbody');

// add row
$tbody.append('<tr />').children('tr:last')
.append('<th>Clear</th>')
.append('<td class="clear" onclick="setShift(this.className)"></td>')
.append('<td class="clear" onclick="setShift(this.className)"></td>')
.append('<td class="clear" onclick="setShift(this.className)"></td>')
.append('<td class="clear" onclick="setShift(this.className)"></td>')
.append('<td class="clear" onclick="setShift(this.className)"></td>')
.append('<td class="clear" onclick="setShift(this.className)"></td>')
.append('<td class="clear" onclick="setShift(this.className)"></td>');

// add another row
$tbody.append('<tr />').children('tr:last')
.append('<th>Earlies</th>')
.append('<td class="earlyshift" onclick="setShift(this.className)"></td>')
.append('<td class="earlyshift" onclick="setShift(this.className)"></td>')
.append('<td class="earlyshift" onclick="setShift(this.className)"></td>')
.append('<td class="earlyshift" onclick="setShift(this.className)"></td>')
.append('<td class="earlyshift" onclick="setShift(this.className)"></td>')
.append('<td class="earlyshift" onclick="setShift(this.className)"></td>')
.append('<td class="earlyshift" onclick="setShift(this.className)"></td>');

// add another row
$tbody.append('<tr />').children('tr:last')
.append('<th>Lates</th>')
.append('<td class="lateshift" onclick="setShift(this.className)"></td>')
.append('<td class="lateshift" onclick="setShift(this.className)"></td>')
.append('<td class="lateshift" onclick="setShift(this.className)"></td>')
.append('<td class="lateshift" onclick="setShift(this.className)"></td>')
.append('<td class="lateshift" onclick="setShift(this.className)"></td>')
.append('<td class="lateshift" onclick="setShift(this.className)"></td>')
.append('<td class="lateshift" onclick="setShift(this.className)"></td>');

// add another row
$tbody.append('<tr />').children('tr:last')
.append('<th>Double</th>')
.append('<td class="doubleshift" onclick="setShift(this.className)"></td>')
.append('<td class="doubleshift" onclick="setShift(this.className)"></td>')
.append('<td class="doubleshift" onclick="setShift(this.className)"></td>')
.append('<td class="doubleshift" onclick="setShift(this.className)"></td>')
.append('<td class="doubleshift" onclick="setShift(this.className)"></td>')
.append('<td class="doubleshift" onclick="setShift(this.className)"></td>')
.append('<td class="doubleshift" onclick="setShift(this.className)"></td>');

// add table to dom
$table.appendTo('#dynamicTable');

});

The html that calls the table:
<div id="dynamicTable"></div>

The css:
#dynamicTable tr:nth-child(1) td {
    background-image: url(../images/clear_32px.gif); 
}
#dynamicTable tr:nth-child(2) td {
    background-image: url(../images/early_32px.gif); 
}
#dynamicTable tr:nth-child(3) td {
    background-image: url(../images/late_32px.gif); 
}
#dynamicTable tr:nth-child(4) td {
    background-image: url(../images/double_32px.gif); 
}

A:

maybe you could try this.
this is one of your css code to change whole cell icons in a selected row:
#dynamicTable tr:nth-child(1) td {
    background-image: url(../images/clear_32px.gif); 
}

change to this for each cells in each rows:
#dynamicTable tr:nth-child(1) td:nth-child(1) {
    background-image: url(/*first child of first row icon*/); 
}

#dynamicTable tr:nth-child(1) td:nth-child(2) {
    background-image: url(/*second child of first row icon*/); 
}

