Get array of ids, filtering out classes already assigned
by eventide
HTML
<table id="docsTable" cellpadding="3">
<thead>
<tr class="tableHeader">
<td colspan="2"></td>
<td width="245px">Document Name</td>
<td width="410px">Document Description</td>
<td width="200px">File Name</td>
</tr>
</thead>
<tbody>
<tr class="docRow">
<td width="25px"><a class="docAdminFormSubmit edit" name="55" href="#">Edit</a></td>
<td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="55" /></td>
<td class="docAndClassTitle">Document 1</td>
<td>Doc 1 Description</td>
<td>doc1.pdf</td>
</tr>
<tr class="docClassesRow">
<td></td>
<td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-55" /></td>
<td colspan="3">CLASS1111</td>
</tr>
<tr class="docClassesRow">
<td></td>
<td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="45-55" /></td>
<td colspan="3">CLASS3333</td>
</tr>
</tbody>
<tbody>
<tr class="docRow">
<td width="25px"><a class="docAdminFormSubmit edit" name="62" href="#">Edit</a></td>
<td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="62" /></td>
<td class="docAndClassTitle">Document 2</td>
<td>Doc 2 Description</td>
<td>doc2.docx</td>
</tr>
<tr class="docClassesRow">
<td></td>
<td width="50px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-62" /></td>
<td colspan="3">CLASS1111</td>
</tr>
</tbody>
<tbody>
<tr class="docRow">
<td width="25px"><a class="docAdminFormSubmit edit" name="35" href="#">Edit</a></td>
...
CSS
body {
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px; }
a.edit:link { color: #000000; }
a.edit:visited { color: #000000; }
a.edit:hover { color: #A04A56; }
a.edit:active { color: #A04A56; }
table { border-collapse: collapse; }
.tableHeader {
background-color: #A04A56;
color: #FFFFFF;
font-size: 1.2em;
font-weight: bold; }
.edit { font-weight: bold; }
.classRow,
.docRow {
background-color: #EFE5D3;
font-size: 1.1em; }
.docAndClassTitle {
font-weight: bold;
}
.noClasses,
.noDocs { font-style: italic; }
JavaScript
$('.docAdminFormSubmit').click(function() {
buttonClicked = $(this).attr('name');
if (buttonClicked == 'submitAddClassesToDoc') {
AddClassesToDoc();
return false;
}
});
function AddClassesToDoc() {
// Check if doc selected in dropdown
var selectedDocID = '';
if ($('select#docsList option:selected').val() == 0) {
alert('No document selected');
// No doc selected
return false;
} else {
selectedDocID = $('select option:selected').val();
//alert('selected Doc ID: ' + selectedDocID);
}
alert('Selected doc ID: ' + selectedDocID);
// Check if any classes selected and add them to the array
var classesToAddToDoc;
if ($('input.chkAddClass:checked').length) {
// At least one class checked
// Get the id(s) of the checked class(es) that aren't already assigned to the selected document
classesToAddToDoc = $('#classesTable input[name="classesToAddToDoc[]"]:checked').map(function() {
var currentClassNumber = $(this).parent('td').next().text();
alert('Current classID: ' + $(this).val() + ', currentClassNumber: ' + currentClassNumber );
var found = false;
$('#docsTable a[name="' + selectedDocID + '"]').parent().parent().parent().find('tr.docClassesRow').each(function() {
alert('Doc\'s current class number: ' + $(this).find('td').last().html());
if ($(this).find('td').last().html() == currentClassNumber ) {
alert('Class number ' + currentClassNumber + ' already assigned');
found = true;
}
})
if (!found) {
alert('Adding ' + $(this).val() + ' to array');
return $(this).val();
}
}).get();
} else {
// No classes checked
alert('No classes checked');
return false;
}
...