Develop Reference

jQuery: Translate from built-in XPath expression to standard jQuery expression

I have the following table:
<h1>Selected Shakespear Plays</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
</tr>
</tbody>
</table>
And then the below script that uses XPath expressions. I believe that when the book I am following was published, XPath was built into jQuery, but it has since been moved out into the jquery-xpath plugin.
$("tr:not([th]):odd").addClass("odd");
$("tr:not([th]):even").addClass("even");
$("td:contains('Henry')").addClass("highlight");
$("thead tr").addClass("table-heading").removeClass("even");
This is intended to add the classes odd and even to all tr elements that don't contain a th element, i.e. to all rows except the first, header row. It does not work, the header row, even with th elements still gets the class even. This is why I had to add .removeClass("even"); to the last line of code.
Is the XPath query not([th]) or just [th]? Then, how do I translate this jQuery "XPath statement":
$("tr:not([th]):odd").addClass("odd");
to a standard jQuery statement that fetches all tr that don't contain any th?

How would I write a regular expression that captures an HTML Table with a particular class?

I'm trying to write a regular express that will capture an HTML table (and all it table data) that has a particular class.
For example, the table has a recapLinks class, its comprised of numerous table rows and table data and then terminated with . See below:
<table width="100%" class="recapLinks" cellspacing="0">
[numerous table rows and data in the table.]
</td></tr></tbody></table>
I'm using javascript.

The regex to capture this is pretty simple, if you can guarantee that there are never nested tables. Nested tabled become much trickier to deal with.
/<table[^>]*class=("|')?.*?\bCLASSNAMEHERE\b.*?\1[^>]*>([\s\S]*?)</table>/im
For instance, if an attribute before class had a closing > in it, which isn't likely, but possible, the regex would fall flat on it's face. Complex reges can try to prepare for that, but it's really not worth the effort.
However, jQuery all by itself can make this a breeze, if these elements are within the DOM. Regex can be easily fooled or tripped, deliberately or accidentally but that's why we have parsers. JQuery doesn't care what's nested or not within the element. It doesn't care about quote style, multiline, any of that.
$(document).ready(function () {
console.log($("table.myClassHere").prop("outerHTML"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="myClassHere">
<tr>
<td>Book Series</td>
</tr>
<tr>
<td>Pern</td>
</tr>
<tr>
<td>Hobbit</td>
</tr>
</table>
<table class="otherClassHere">
<tr>
<td>Movies</td>
</tr>
<tr>
<td>Avengers</td>
</tr>
<tr>
<td>Matrix</td>
</tr>
</table>

dataTables - filter/search only in selected rows

I have a question. Is there any possibility in jQuery dataTables plugin to only filtering rows with specific class?
For example: I got a table and I want to filter only rows with searchable class. The rest rows stays as they is.
Is this even possible?
<table class="dataTable">
<tr class="searchable">
<td>text to search</td>
<td>text to search</td>
</tr>
<tr>
<td>something else</td>
<td>something else</td>
</tr>
<tr class="searchable">
<td>text to search</td>
<td>text to search</td>
</tr>
<tr>
<td>something else</td>
<td>something else</td>
</tr>
</table>
Edit:
I'm thinking to write my own plugin, but I never do that before.
Something like:
getFilterInput
table.each(tr).function(){
if(row.hasClass(searchable){
//do filtering
}else{
//leave row alone
}
Anyone does something like that and can give me a clue where to start?

You can just use selector like this: $('.searchable')
$('tr').not('.searchable').hide();

One thing you could do is use a hidden column that says whether that row is searchable or not, then when you need to find those specific rows, you just search that particular column.
The way you're trying to leverage classes in your markup will almost certainly require that you modify DataTables.js and/or develop your own plugin.

DataTables - Last column fixed width

The idea is this :
I have one jQuery that loads the DataTables, and I know that I can set the "aoColumns" : "sWidth" parameter to make one column fixed width and it's working.
The problem that I have is that I have a lot of tables, variable numbers of columns, and I need the LAST one to be fixed size, no matter what number that column is. Sometimes can be 3rd, sometimes can be 8th, sometimes can be 16th, does not matter.
Is even possible ?
No, I don't want to call datatable jQuery for each table, no I don't want to modify anything in the structure because it's working very well right now, just maybe add some class or parameters to the Javascript.

Structure your tables like this:
<table class="tableClass">
<colgroup>
<col></col>
<col></col>
<col></col>
</colgroup>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</tbody>
</table>
That way, your jQuery will just need to do this:
$('.tableClass').each(function() {
var self = this;
$(self).find('col:last').css('background-color', 'red');
});
That jQuery will find the last column in each table with that class, and do whatever you want with that last class on each one. (I just used the background-color to test it out.)
If all you're doing is just setting the width, you might be able to get away with doing $(self).find('th:last'), but the <colgroup> and <col> is the "correct" way to go.

Add selected row from a table to another table with Jquery and MVC3

I am using MVC 3, EF Model First on my project.
In my View I have 4 tables that look likes these.
<div class="questionsForSubjectType">
<table>
<thead>
<tr>
<th>
Title
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
test
</td>
</tr>
</tbody>
</table>
</div>
users should be able to select and add to another table lets say the table is following:
<table id="CustomPickedQuestions>
/* <----- Questions that users chose from the other tables /*
</table>
What I am looking for is that when a users click on a row, the row shall get removed and added to the CustomPickedQuestions, When the row is added to that table, the user should also be able to remove it from CustomPickedQuestions Table and then that row shall go back to the Table it was before.
I now wonder how I can accomplish this with help of client-side jquery scripting.

You've got far too much irrelevant complexity in you code (for the specific question you ask). The title is good, but not the code. Rather than posting your complex project code, create the simplest possible reproduction of the problem using the least amount of code/methods/properties (with common names, that is ProductID, ProductName, etc). part 3 of my tutorial shows how to do this. See http://www.asp.net/mvc/tutorials/javascript/working-with-the-dropdownlist-box-and-jquery/adding-a-new-category-to-the-dropdownlist-using-jquery-ui