tbody focus does not work - javascript

I have the following table structure:
<table>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tbody id="page-1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<tbody id="page-2">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
I have tried the following jquery code to make scroll to specific tbody by id like:
page = 1;
$("#page-"+page).focus()
The above code failed to make scroll to the specified tbody. I also tried the following in order to get first tr but also failed:
page = 1;
$("#page-"+page+":first-child").focus()
The last thing that I have to mention, that tbody is loaded via ajax request and console.log($("#page-"+page).html()) works fine and prints out the html of the tbody

I have got the mistake. focus is not the suitable event for tbody in other words there is no point of focus for it. The solution is Run ScrollTop with offset of element by ID and using:
$('html, body').animate({
scrollTop: $('#page-'+page).offset().top -100
}, 2000);

Related

table inside hidden div becomes visible upon appending tr dynamically

$("#zz").click(function() {
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>
<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>
</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
<td class="sorting_1">
<img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th></th>
<th>Established On</th>
<th>Objective</th>
<th>Target Value</th>
<th>Baseline Value</th>
<th>Monitorng mechanism</th>
<th>Target Date</th>
<th>Action Plan</th>
<th>Frequency of Evaluation</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img class="add" id="add" src="/Images/add.png" style="width: 2em;">
<div style="display:none">
<table>
<thead class="bg-blue">
<tr>
<th>
Objective Evaluated On
</th>
<th>
Objective Measured Value
</th>
<th>
From Period
</th>
<th>
To Period
</th>
<th>
Trend
</th>
<th>
NCR Ref. (If Objective not achieved)
</th>
<th>
Status of Objective Evaluation
</th>
<th>
Objective Evidence
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="8">
<div style="text-align: center;">
<h4 style="color: grey;">No data exists</h4>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
09/07/2019 </td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td> ww</td>
<td>
09/07/2019 </td>
<td>
<p>Not Available</p>
</td>
<td> Annually</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
1
</td>
<td>
<a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
</td>
<td>
2019
</td>
<td>
Department
</td>
<td>
HR DEPARTMENT
</td>
<td>
Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
</td>
<td>
Approved
</td>
<td>
<span class="badge badge-info">No File attached</span>
</td>
<td>
<a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
<span class="badge badge-info">Edit</span>
</a>
</td>
<td>
<span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
</td>
</tr>
The above is just an example of a row from my table.
Upon appending $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); on a button click the table becomes visible in the new <tr>
To my extend my knowledge , apparently it's been appended directly to tr since the display is set to none, does the dom elements work like this ?
I'm novice at the most, when it comes to html.
Can Anyone please explain why this happens ?
Any relevant information will greatly appreciated.
Your selection (using html()) returns the contents of the element, not the element itself, so any attributes on the element are also disregarded. One easy fix might be to move your hide styles down a level:
<div id="data_hidden">
<table style="display:none">
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
Demo 1
This leaves the original div element in the DOM, but it doesn't affect appearance.
Alternatively, grab the outerHTML of the selection's raw element:
$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>"
+ $(this).next().get(0).outerHTML + "</td></tr>");
});
Demo 2

Edit/Print <input> field via Console

Here is what I have. Nothing has IDs, Names or Classes.
Is there anyway to enter a vaue in the input field under City using the Chrome Console and js? Alternatively is there a way I can print the value of said field also using js in the Chrome Console?
I assume it requires using the div City and traversing to next input.
Thanks ahead of time!
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>Address</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>City</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<div>Zipcode</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
document.getElementsByTagName("table")[3].getElementsByTagName("input")[0].value="your value"
The boilerplate code
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
try {
var field = document.getElementsByTagName("table")[i].getElementsByTagName("div")[0].textContent;
if (field == "City") {
document.getElementsByTagName("table")[i + 1].getElementsByTagName("input")[0].value = "your values"
}
} catch (err) {}
}

How to return the table with javascript or jquery by returning another table with all the rows that contains a td that doesn't have a colspan

How to return the table with javascript or jquery by returning another table with all the rows that contains a td that doesn't have a colspan
<table>
<tr>
<td> text1 </td>
<td> text2 </td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td> text3 </td>
<td> text4 </td>
</tr>
</table>
Thus I'm expecting
<table>
<tr>
<td> text1 </td>
<td> text2 </td>
</tr>
<tr>
<td> text3 </td>
<td> text4 </td>
</tr>
</table>
You can use a single line of jQuery for this with the :has selector:
$('table tr:has(td[colspan])').remove();

JQuery: Table Row Show/Hide based on Column Value

I have a table that has a column with Yes/No as possible values
<table id="mytable">
<thead>
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
ActiveYN
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apple
</td>
<td>
12345
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Orange
</td>
<td>
67890
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Mango
</td>
<td>
456745
</td>
<td>
Yes
</td>
</tr>
I need to show the row if ActiveYN is 'Yes' and Hide id ActiveYN is 'No'
How can i access the ActiveYN inside JQuery and show/hide accordingly?
DEMO
$('button').on('click', function () {
var $rowsNo = $('#mytable tbody tr').filter(function () {
return $.trim($(this).find('td').eq(2).text()) === "No"
}).toggle();
});
How about something like this: $('td:contains("No")').parent().hide();
Live Demo
JS
$('input').click(function(){
$('td:contains("No")').parent().toggle();
});
HTML
<input type='button' value='hide/show' />
<table id="mytable">
<thead>
<tr>
<th>
Col1
</th>
<th>
Col2
</th>
<th>
ActiveYN
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Apple
</td>
<td>
12345
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>
Orange
</td>
<td>
67890
</td>
<td>
No
</td>
</tr>
<tr>
<td>
Mango
</td>
<td>
456745
</td>
<td>
No
</td>
</tr>
usually I would add this as an attribute on the row:
<tr data-active="No">
....
</tr>
Then to hide them all you can do:
$(function(){
$("[data-active=No]").hide();
});
Or you can add different classes/styles based on the value when it creates the table.
You can do it from server side itself.
#if (item.ActiveYN) {
<tr style="display: none;">
} else {
<tr>
}
I don't know the razor syntax, but you get the idea.
To be able to do it from client-side, add a class.
#if (item.ActiveYN) {
<tr class="hideMe">
} else {
<tr>
}
And then in jQuery:
$('.hideMe').hide();
Edited again after your question was edited, now if we forget the server-side altogether:
$("mytable").find("tr:contains('No')").hide();
Use this statement in your button click handler function. But, remember it will also find any text which contains "No" anywhere in a row. To make it more precise, use regular expressions to search exactly a "No".

jquery auto print the row number

i've a table with 10 row, is it possible to print the row number (from 1 to 9, the first row is NO&title, the second row should be 1) to the td with class "sno" based on the size of the table? here is the html:
<table width="100%" border="1">
<tr>
<td width="23%">No.</td>
<td width="77%">Title</td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
<tr>
<td class="sno"> </td>
<td> </td>
</tr>
the result should be
<table width="100%" border="1">
<tr>
<td width="23%">No.</td>
<td width="77%">Title</td>
</tr>
<tr>
<td class="sno">1</td>
<td> </td>
</tr>
<tr>
<td class="sno">2</td>
<td> </td>
</tr>
<tr>
<td class="sno">3</td>
<td> </td>
</tr>
<tr>
<td class="sno">4</td>
<td> </td>
</tr>
<tr>
<td class="sno">5</td>
<td> </td>
</tr>
<tr>
<td class="sno">6</td>
<td> </td>
</tr>
<tr>
<td class="sno">7</td>
<td> </td>
</tr>
<tr>
<td class="sno">8</td>
<td> </td>
</tr>
<tr>
<td class="sno">9</td>
<td> </td>
</tr>
The question is not generate the table, it is print the right number to target
Try with the simpleone
$('table tbody tr').not(":first").each(function(idx){
$(this).children(":eq(0)").html(idx + 1);
});
Here is the jsfiddle example: http://jsfiddle.net/3BBEN/
$(document).ready(function(){
//use a special class name or id for the table
//using find I'm getting all tr elements in the table
//using not(':eq(0)') I'm ignoring the first tr element
//using each I'm iterating through the selected elements
$('table').find('tr').not(':eq(0)').each(function(i){
//using children('td:eq(0)') I'm getting the first td element inside the tr
$(this).children('td:eq(0)').addClass('sno').text(i+1);
});
});
Table row elements have a rowIndex property that is the zero–based sequence number for the table
section that they are in. So if you have a reference to a cell you can use:
var rowIndex = cell.parentNode.rowIndex;
If you have header rows in a table, you probably should put them in a thead table section, then
you can number the rows in tbody section easily, e.g.
<table>
<thead>
<tr>
<td>head<td>head
</tr>
</thead>
<tbody>
<tr>
<td class="sno"></td>
<td>...</td>
</tr>
<tr>
<td class="sno"></td>
<td>...</td>
</tr>
</tbody>
</table>
So now you can do something like:
window.onload = function() {
var table = document.getElementsByTagName('table')[0];
var rows = table.tBodies[0].rows;
for (var i=0, iLen=rows.length; i<iLen; i++) {
rows[i].cells[0].innerHTML = i + 1;
}
};
Of course you can get the rows some other way (e.g. class), but the above is independent of that.
Try this:
$(document).ready(function(){
$cells=$("table td.sno");
for(var i=0;i<$cells.length;i++)
{
// alert(i);
$cells.eq(i).text(i);
}
});
Check on fiddle http://jsfiddle.net/qcWec/1/
try this::
$(document).ready(function(){
var i=1;
$('.sno').each(function(){
$(this).text(i);
i++;
});
});

Categories