Develop Reference

jquery sorting with each element of itsown

So here is my Concern. I am trying to sort the data i have in the following format so that every parent elemnts has child elments and when the sort is selected for that, it should only sort its childrens
The Code for this is:
<!--- first list --->
<tr>
<td colspan="2"><li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong> [Desc] </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="81" style="margin-left:20px;"> Running </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="113" style="margin-left:40px;"> Coping</li></td>
</tr>
<tr>
<td colspan="2"><li data-id="71" style="margin-left:40px;"> Printing </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="65" style="margin-left:20px;"> references </li></td>
</tr>
<!--- Second List --->
<tr>
<td colspan="2"><li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong> [Desc] </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="116" style="margin-left:20px;"> Opening </li></td>
</tr>
<tr>
<td colspan="2"><li data-id="109" style="margin-left:20px;"> Closng </li></td>
</tr>
what i am trying is: when i click the desc of the first list, it should only the elements which are under the first list using data-id
same for second list ..
both lists should work independently and sorting should be on heir own, i gave a shot but not successful
here is my code
function sortdesc(){
$('li.childrens').sort(function(a,b){
return parseInt(a.getAttribute('data-id'),10)-parseInt(b.getAttribute('data-id'),10)
});
}
$(document).on('click',".sort",function(e) {
sortdesc();
});
tried here in fiddle but no luck [updated to add table to each li]
http://jsfiddle.net/HWmz3/85/

According to this answer:
function sortdesc(elem) {
// get the table of the clicked link, find its tbody
var $tbody = $(elem).closest('table').find('tbody');
// sort the tr of this tbody
$tbody.find('tr')
.sort(function(a, b) {
var a = $(a).find('li'); // get the li of a tr
var b = $(b).find('li'); // get the li of b tr
return a.data('id') < b.data('id') ? -1 : 1; // compare and return the result
})
.appendTo($tbody); // to make the sort
}
$(document).on('click', ".sort", function(e) {
// pass the link that was clicked to the function:
sortdesc(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- first list --->
<table>
<thead>
<tr>
<td colspan="2">
<li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong> [Desc]
</li>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<li data-id="81" style="margin-left:20px;">Running</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="113" style="margin-left:40px;">Coping</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="71" style="margin-left:40px;">Printing</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="65" style="margin-left:20px;">references</li>
</td>
</tr>
</tbody>
</table>
<!--- Second List --->
<table>
<thead>
<tr>
<td colspan="2">
<li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong> [Desc]
</li>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<li data-id="116" style="margin-left:20px;">Opening</li>
</td>
</tr>
<tr>
<td colspan="2">
<li data-id="109" style="margin-left:20px;">Closng</li>
</td>
</tr>
</tbody>
</table>

Adding Image on html table dynamically using JQuery

I am trying to adding image on html table dynamically using JQuery, but I am confusing how to find out a table 2,3..etc tr with in first td to add image.
My table structure has no id or class how to find, but before table have some text as below.
<table width="100%" border="0" cellspacing="1" cellpadding="5">
<tbody>
<tr valign="top">
<td colspan="2"><b>Order Details:</b><br> <br>
<table width="100%" bgcolor="#EEEEEE">
<tbody>
<tr>
<td>
<b>Code</b>
</td>
<td>
<b>SKU</b>
</td>
<td>
<b>Quantity</b>
</td>
<td>
<b>Price</b>
</td>
<td>
<b>Grand Total</b>
</td>
</tr>
<tr>
<td>10172</td>
<td>Product 1<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>
₹ 250.00
</td>
</tr>
<tr>
<td>10165</td>
<td>Product 2<br></td>
<td>5</td>
<td>
₹ 50.00
</td>
<td>₹ 250.00
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Subtotal: </td>
<td>₹ 250.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Tax: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Shipping Cost: </td>
<td>₹ 0.00</td>
</tr>
<tr>
<td colspan="3"> </td>
<td align="right"> Grand Total: </td>
<td>₹ 250.00</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
</tbody></table>
How to Add product Image before of the SKU.
Any help plz..?

As you don't have a thead or even use th for the headers, you'll have to skip the first row, you can use ">" to specify the direct hierarchy, eg:
$("table>tbody>tr>td>table>tbody>tr:not(:first-child)").each(function() {
var codecell = $(this).find("td:eq(0)");
var img = "/pathtoimage/" + codecell.text() + ".jpg"
codecell.after("<td><img src='" + img + '/></td>");
});
Updated: Fixed typo for ("td:eq(0)") vs ("td").eq(0) vs ("td")[0]

Why is variable undefined when the function is called again

looks like a scope issue I can't get my head around not sure why the variable links is undefined when the function is called twice
<table class="list" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr class="headerRow">
<th scope="col" class="numericalColumn zen-deemphasize">Display Order</th>
<th scope="col" class=" zen-deemphasize">Message</th>
<th scope="col" class=" zen-deemphasize">Description</th>
<th scope="col" class=" zen-deemphasize">Media File Name</th>
<th scope="col" class="zen-deemphasize ">Location</th>
<th scope="col" class="zen-deemphasize ">Status</th>
<th scope="col" class=" zen-deemphasize">data</th>
</tr>
<tr class="dataRow">
<th scope="row" class="dataCell">
1
</th>
<td scope="row" class=" dataCell">
Homepage
<div class="mouseOverInfoOuter" tabindex="0">
</div>
</td>
<td class="dataCell">
Homepage
</td>
<td class="dataCell">
<a href="http://test.com/test/zip1" class="zipUrl">
test1.zip
</a>
</td>
<td scope="row" class="dataCell">
test1.zip
</td>
<td scope="row" class="dataCell">
Content Server
</td>
<td scope="row" class="dataCell">
Available for download
</td>
<td scope="row" class="dataCell">
File not available.
</td>
<td scope="row" class="dataCell">
</td>
<td class=" dataCell ">
</td>
</tr>
<tr class="dataRow">
<th scope="row" class="dataCell">
2
</th>
<td scope="row" class=" dataCell">
contact
<div class="mouseOverInfoOuter" tabindex="0"> </div>
</td>
<td class="dataCell">
contact
</td>
<td class="dataCell">
<a href="http://test.com/test/zip2" class="zipUrl">
test2.zip
</a>
</td>
<td scope="row" class="dataCell">
test2.zip
</td>
<td scope="row" class="dataCell">
Content Server
</td>
<td scope="row" class="dataCell">
Available for download
</td>
<td scope="row" class="dataCell">
File not available.
</td>
<td scope="row" class="dataCell">
</td>
<td class=" dataCell ">
</td>
</tr>
<tr class="dataRow">
<th scope="row" class="dataCell">
2
</th>
<td scope="row" class=" dataCell">
blog
<div class="mouseOverInfoOuter" tabindex="0"></div>
</td>
<td class="dataCell">
blog
</td>
<td class="dataCell">
<a href="http://test.com/test/zip3" class="zipUrl">
test3.zip
</a>
</td>
<td scope="row" class="dataCell">
test3.zip
</td>
<td scope="row" class="dataCell">
Content Server
</td>
<td scope="row" class="dataCell">
Available for download
</td>
<td scope="row" class="dataCell">
File not available.
</td>
<td scope="row" class="dataCell"></td>
<td class=" dataCell ">
</td>
</tr>
</tbody>
</table>
<script>
(function init() {
var tableRow = document.querySelectorAll('.dataRow');
var links = $('.dataCell:nth-child(4) .zipUrl');
if (tableRow.length === 0) return;
var index = 0;
function click() {
if (index < tableRow.length) {
//comment out line 14 to see console.log working normally
$(links[index++]).click();
console.log('Clicked on... ' + links[index++])
click();
}
}
click();
}());
</script>
Example
http://jsfiddle.net/Grundizer/6p60bkg9/
I'm trying to click on every link which is in the Media File Name column of the table, I don't have access to the source code to add or remove css classes, I have to work with the markup produced by the server.

Main problem was, index was incrementing two times one at $(links[index++]).click(); and another at console.log('Clicked on... ' + links[index++]); second time incrementation points at a null array element.
Do this->
$(window).load(function(){
var tableRow = document.querySelectorAll('.dataRow');
var links = $('.dataCell:nth-child(4) .zipUrl');
if (tableRow.length === 0) return;
var index = 0;
function click() {
if (index < tableRow.length) {
//comment out line 14 to see console.log working normally
$(links[index++]).click();
console.log('Clicked on... ' + links[index]);
click();
}
}
click();
}
);//]]>
by the way, there was some syntactical error, I fixed it in the solution code.

How can I use special characters in angular directives attributes?

I would like to use strings including german characters (Ä, Ö, Ü) in attributes of a custom angularJS directive.
For example:
<my-custom-directive my-label="Lärm" />
Another example is the ui.bootstrap.tabs directive:
<tabset>
<tab heading="Lärm"> content ... </tab>
<tab heading="Second Heading"> content ... </tab>
</tabset>
This results in a tab with heading "L�rm". Any ideas?

Usually in a good editor you can change the document encoding type, the document is saved in. try to set it to iso-8859-1/utf-8 and save/upload again.
Next bet would be to change the encoding of the html-output with
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Umlauts often is trial & error...

Use escape characters for javascript.
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tbody><tr>
<th>Display</th>
<th>Friendly Code</th>
<th>Numerical Code</th>
<th>Description</th>
</tr>
<tr class="grey">
<td class="codes">Ä </td>
<td class="codes">&Auml;</td>
<td class="codes">&#196;</td>
<td class="codes">Capital A-umlaut</td>
</tr>
<tr>
<td class="codes">ä </td>
<td class="codes">&auml;</td>
<td class="codes">&#228;</td>
<td class="codes">Lowercase a-umlaut</td>
</tr>
<tr class="grey">
<td>É</td>
<td>&Eacute;</td>
<td>&#201;</td>
<td>Capital E-acute</td>
</tr>
<tr>
<td>é</td>
<td>&eacute;</td>
<td>&#233;</td>
<td>Lowercase E-acute</td>
</tr>
<tr class="grey">
<td class="codes">Ö </td>
<td class="codes">&Ouml;</td>
<td class="codes">&#214;</td>
<td class="codes">Capital O-umlaut</td>
</tr>
<tr>
<td class="codes">ö </td>
<td class="codes">&ouml;</td>
<td class="codes">&#246;</td>
<td class="codes">Lowercase o-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">Ü </td>
<td class="codes">&Uuml;</td>
<td class="codes">&#220;</td>
<td class="codes">Capital U-umlaut</td>
</tr>
<tr>
<td class="codes">ü </td>
<td class="codes">&uuml;</td>
<td class="codes">&#252;</td>
<td class="codes">Lowercase u-umlaut</td>
</tr>
<tr class="grey">
<td class="codes">ß</td>
<td class="codes">&szlig;</td>
<td class="codes">&#223;</td>
<td class="codes">SZ ligature</td>
</tr>
<tr>
<td class="codes">«</td>
<td class="codes">&laquo;</td>
<td class="codes">&#171;</td>
<td class="codes">Left angle quotes</td>
</tr>
<tr class="grey">
<td class="codes">»</td>
<td class="codes">&raquo;</td>
<td class="codes">&#187;</td>
<td class="codes">Right angle quotes</td>
</tr>
<tr>
<td class="codes">„</td>
<td class="codes"> </td>
<td class="codes">&#132;</td>
<td class="codes">Left lower quotes</td>
</tr>
<tr class="grey">
<td class="codes">“</td>
<td class="codes"> </td>
<td class="codes">&#147;</td>
<td class="codes">Left quotes</td>
</tr>
<tr>
<td class="codes">”</td>
<td class="codes"> </td>
<td class="codes">&#148;</td>
<td class="codes">Right quotes</td>
</tr>
<tr class="grey">
<td class="codes">°</td>
<td class="codes"> </td>
<td class="codes">&#176;</td>
<td class="codes">Degree sign (Grad)</td>
</tr>
<tr>
<td class="codes">€</td>
<td class="codes">&euro;</td>
<td class="codes">&#128;</td>
<td class="codes">Euro</td>
</tr>
<tr class="grey">
<td>£</td>
<td>&pound;</td>
<td>&#163;</td>
<td>Pound Sterling</td>
</tr>
</tbody></table>

compare two html tables data line by line and highlight using jquery

I have created a GSP page with two dynamic table with data and now i have to compare the data (inner html) and if any difference then highlight in table 2.
how to do it on clicking button using JS/jquery on clientside?
Table 1 is -
<table class="table loadTable" id ="table1">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode </td>
<td nowrap="">int </td>
<td nowrap="">YES </td>
<td nowrap="">NULL </td>
<td nowrap="">10 </td>
</tr>
<tr>
<td nowrap="">Number </td>
<td nowrap="">varchar </td>
<td nowrap="">NO </td>
<td nowrap="">20 </td>
<td nowrap="">NULL </td>
<td nowrap="">PRI </td>
</tr><tr>
<td nowrap="">Type </td>
<td nowrap="">tinyint </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">3 </td>
<td nowrap="">PRI </td>
</tr>
<tr>
<td nowrap="">Date </td>
<td nowrap="">smalldatetime </td>
<td nowrap="">NO </td>
<td nowrap="">NULL </td>
<td nowrap="">NULL </td>
</tr>
</tbody>
table 2 is -
<table class="table loadTable" id ="table2">
<thead>
<tr bgcolor="#f0f0f0">
<td nowrap=""><b>COLUMN_NAME</b></td>
<td nowrap=""><b>DATA_TYPE</b></td>
<td nowrap=""><b>IS_NULLABLE</b></td>
<td nowrap=""><b>CHARACTER_MAXIMUM_LENGTH</b></td>
<td nowrap=""><b>NUMERIC_PRECISION</b></td>
<td nowrap=""><b>COLUMN_KEY</b></td>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">CountryCode</td>
<td nowrap="">int</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">10</td>
<td nowrap=""></td>
</tr>
<tr>
<td nowrap="">PhoneNumber</td>
<td nowrap="">varchar</td>
<td nowrap="">NO</td>
<td nowrap="">20</td>
<td nowrap="">NULL</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">Type</td>
<td nowrap="">tinyint</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">3</td>
<td nowrap="">PRI</td>
</tr>
<tr>
<td nowrap="">EffectiveDate</td>
<td nowrap="">datetime</td>
<td nowrap="">NO</td>
<td nowrap="">NULL</td>
<td nowrap="">NULL</td>
<td nowrap=""></td>
</tr>
</tbody>
</table>
if we click on following button then table 2 should get highlighted with any non matching data with table2.
<div style="align:right"><input type="submit" value="Compare IVR & TNS" /></div>

I wrote a quick function that should work as long as the number of rows is always the same and the user can't remove a row. in which case you should add id's to the rows and compare the rows by id or key.
function compareTables(t1, t2){
var t2rows = t2.find('tbody > tr');
t1.find('tbody > tr').each(function(index){
var t1row = $(this);
var t2row = $(t2rows[index]);
var t2tds = t2row.find('td');
t1row.find('td').each(function(index){
if($(this).text().trim() != $(t2tds[index]).text().trim() ){
console.log('difference: table1:('+$(this).text()+') table2:('+$(t2tds[index]).text()+')');
//set row in error
return;
}
});
});
}