You can use the .not() function from jQuery.
$('myElements').not('myExcludedElements');
UPDATE:
JSFiddle would not load up for me for some reason so here it is in CodePen instead.
Question
I'm using the following to select a table element in my application for users to drag/drop a table into Excel:
$('#footer').on("click", "#exportSel", function () {
var el = document.getElementById(curTable);
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
if (sel.removeAllRanges) {
sel.removeAllRanges();
} else if (sel.empty) {
sel.empty();
}
}
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
});
...and everything is working fine. Except one of my tables has images in a column, and I would like remove this column (or td's in that column) from the selection.
I added the "Picture" td's to a "nosel" class, and was able to put all td's in the table not in that class into a variable:
cells = $("#" + curTable + " tr td:not(.nosel)");
I then omitted the code to remove or empty the current selection, and tried adding each cell to the selection:
range.selectNode(cells[i]);
sel.addRange(range);
... but only the first td is being selected.
So two questions:
Is this even possible?
Is there a better method to use than addRange? I tried extend but that did not work.
As requested, here is an example of my table:
<table class="sortable" id="resultsTable" border="1">
<thead id="resultsHeader">
<th>OID</th>
<th>Image</th>
<th>Address</th>
<th>Parcel ID</th>
</thead>
<tbody id="resultsBody" data-ssimplename="results">
<tr>
<td>1</td>
<td align="center" class="nosel"><img style="width: 125px;" src="http://www.vanderburghassessor.org/assessor_images/12/180/34/213/020/12-180-34-213-020-S.jpg"></td>
<td align="center">5830 N KERTH AVE</td>
<td align="center">82-06-04-034-213.020-020</td>
</tr>
</tbody>
</table>
OTHER TIPS
I have decided to go about this another way.
Instead of removing the Image column from the selection, I am going to convert the images to the URL string when they make the selection:
`
for (i = 0; i < imgs.length; i++) {
var urlT = $(imgs[i]).attr('src');
$(imgs[i]).hide();
$(imgs[i]).parent().text(urlT);
}
`
This way the URL still exists to the image if in fact someone wants it.
The only issue is trying to restore the image once the selection is cleared. I tried adding an .on() function but it doesn't want to work correctly:
`
$('body').on('click', function () {
if ($("#" + curTable + " img:hidden").length > 0) {
var imgs = $('#' + curTable + " img:hidden");
for (i = 0; i < imgs.length; i++) {
$(imgs[i]).parent().text() = '';
imgs[i].show();
}
}
});
`
I can deal with it not restoring, but obviously I would prefer if it did.