I am new to jQuery and hope someone can help me with this.
I have a large HTML table with dynamically added rows.
The table has a standard structure (incl. thead, tbody and tfoot).
Within this table there are editable TDs (which have the class "editable" and contain a contenteditable div) and non-editable TDs (which dont't have the class "editable" and do not contain a div).
If a user is in such a div I would like to check if the current (closest) TD is the last TD within the same row that has a certain class ("editable").
I tried the below but this doesn't work here. Can someone tell me what I am doing wrong ?
My jQuery (in doc ready):
$(document).keydown(function(e){
var current = $(e.target);
// ...
if($(current).closest('td').is('td.editable:last')){
alert('last editable td in current row'); // test alert
}
// ...
});
My HTML (example row):
<tr>
<!-- ... -->
<td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
<td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
<td></td> <!-- non-editable -->
<td></td> <!-- non-editable -->
<td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
<!-- ... -->
</tr>
Try the :last-of-type selector? Never use :last or :first, as they are implemented differently in every browser!
if ($(current).closest('td').is('td.editable:last-of-type')) {
Use jQuery index() like
$('div').click(function() {
var editables = $(this).closest('tr').find('td.editable')
var count = editables.length;
if(editables.index($(this).closest('td')) == (count - 1))...
});
The above should not return an index if closest('td') does not have class editable
$('div').click(function() {
var editables = $(this).closest('tr').find('td.editable')
var count = editables.length;
console.log('Is last editable td: ' + (editables.index($(this).closest('td')) == (count - 1)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<!-- ... -->
<td class="editable">
<div contenteditable="true">test</div>
</td>
<!-- editable -->
<td class="editable">
<div contenteditable="true">test</div>
</td>
<!-- editable -->
<td>
<div contenteditable="true">not editable</div>
</td>
<!-- non-editable -->
<td>
<div contenteditable="true">not editable</div>
</td>
<!-- non-editable -->
<td class="editable">
<div contenteditable="true">test</div>
</td>
<!-- editable -->
<td>
<div contenteditable="true">not editable</div>
</td>
<!-- ... -->
</tr>
</table>
Fiddle
<table>
<tr>
<td class="editable"><div contenteditable="true">11</div></td>
<td class="editable"><div contenteditable="true">22</div></td>
<td>33</td>
<td>44</td>
<td class="editable"><div contenteditable="true">55</div></td>
</tr>
</table>
$("table tr td.editable").keydown(function(){
var col = $(this).parent().children().index($(this));
if(col == $(this).parent().children().size() - 1){
alert('last editable td in current row'); // test alert
}
});
Hey you can try this: https://jsfiddle.net/alaingoldman/5cseugvs/1
Basically what i did is i targeted the table tag and looked through it's descendants with the pseudo class last-of-type.
Hopefully this helps. Cheer.s
$('table tr:last-of-type').css({backgroundColor: "pink"})
Related
I have an HTML table on a page that I'd like to use jQuery to take the information from, clean/sanitize it, and create a new "clean" HTML table with the information.
I have the table with the following <tr> structure:
<tr class="dirRow">
<td style="border-style:None;width:35px;">
<a href="http://www.link.com">
<img class="class-here" src="/media/proxy.ashx?id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&size=50w50h_fxd" style="border-width:0px;height:35px;width:35px;">
</a>
</td>
<td style="border-style:None;">
Full Name
</td>
<td style="border-style:None;">
<span>123.456.7890</span>
</td>
<td style="border-style:None;">
<span>456.789.0123</span>
</td>
<td style="border-style:None;">
<span>Office</span>
</td>
<td style="border-style:None;">
<span>Title</span>
</td>
<td style="border-style:None;">
<span>Supervisor</span>
</td>
</tr>
<!-- 150+ more tr with same structure -->
Which I'd like to input the information into the following table (formatted this way to use a plugin that takes this table input and formats it into an org chart). I've commented how the information should be modified from the original HTML table.
<table id="orgChartData">
<tbody>
<tr>
<th>id</th>
<th>parent id</th>
<th>image</th>
<th>name</th>
<th>phone</th>
<th>phonecell</th>
<th>office</th>
<th>title</th>
<th>supervisor</th>
</tr>
<tr>
<td>
<!-- Full Name (text only, no href, goes here) -->
Full Name
</td>
<td>
<!-- Supervisor (text only, no span, goes here) -->
Supervisor
</td>
<td>
<!-- img src (just the relative path, no query string) -->
/media/proxy.ashx?id=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
</td>
<td>
<!-- Full Name (including href with "xlink:" added to the beginning of the href) -->
<a xlink:href="http://www.google.com/" target="_blank">Full Name</a>
</td>
<td>
<!-- Phone (no span) -->
123.456.7890
</td>
<td>
<!-- Phonecell (no span) -->
456.789.0123
</td>
<td>
<!-- Office (no span) -->
Office
</td>
<td>
<!-- Title (no span) -->
Title
</td>
<td>
<!-- Supervisor (no span) -->
Supervisor
</td>
</tr>
</tbody>
</table>
Updated my code based on Michael Sacket's answer below
I now have all the variables in the right format, but need to create the new <tr>s based on these variables.
$('tr.dirRow').each(function () {
var tds = $(this).children();
var fullName = tds.eq(1).text();
var supervisor = tds.eq(6).text();
var imgSource = tds.eq(0).find("img").attr("src");
var imgSourceClean = imgSource.substring(0, imgSource.indexOf('&'));
var fullNameHref = tds.eq(1).find("a").attr("href");
var fullNameHyperlink = '<a xlink:href="' + fullNameHref + '">' + fullName + '</a>';
var phone = tds.eq(2).text();
var phoneCell = tds.eq(3).text();
var office = tds.eq(4).text();
var title = tds.eq(5).text();
});
Thanks for any help.
My suggestion is to break it up, one part at a time. To get you started:
Getting the data
var data = [];
var tds = null;
$('tr.dirRow').each(function(){
tds = $(this).children();
data.push({
"fullName": tds.eq(1).text()
});
});
console.log(data);
Sending it to the destination table
// grab a reference to the destination table
var destTbody = $('#orgChartData > tbody');
// loop through the data adding rows
var newRow = null;
for(var i=0;i<data.length;i++){
newRow = $('<tr/>');
newRow.append( $('<td>' + data[i].fullName + '</td>') );
destTbody.append(newRow);
}
Note: You could also do all that in a single loop within the $('tr.dirRow').each().
I'm having trouble selecting all the last inputs on a set of divs with tables inside them. Here's a jsFiddle of my issue.
A simplified version of my HTML structure:
<div class=".container">
<table>
<tbody>
<tr>
<td> <input /> </td>
<td> <input /> </td> <!-- last input in container -->
</tr>
</tbody>
</table>
</div>
<!-- More like this -->
<div class=".container"> ...
So if I had 5 .container the resulting selection would have 5 input's
I tried the following selector:
$('.container input:last-child')
You can select the last td and get its child input like:
var $inputs = $('.container td:last-child>input');
Demo: https://jsfiddle.net/bonh4r0g/
i have div based drop-down and its value stored in TD[data-value]. i want to write script when that TD data-value changed.
below the format of td :
<td data-value="some-id">
<div class="dropdown">some elements</div>
</td>
I try that
$("table tr td:eq(1)[data-value]").change(function(){
//
}
but not working
The change event handler works only with input elements. You may do like this:
if($("table tr td:eq(1)[data-value]") != 'some-id'){
console.log('changed');
}
When the value would be changed? May be you do like this:
$("table tr td:eq(1)[data-value]").click(function(){
$(this).data('value') == 'some-id' ? 'other-value' : 'some-id';
//here you may do other stuff as above...
});
You can use MutationObservers in modern browsers
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName = 'data-value') {
snippet.log('value of ' + mutation.target.id + ' changed to: ' + $(mutation.target).attr('data-value'))
}
});
});
var config = {
attributes: true
};
$('td[data-value]').each(function() {
observer.observe(this, config);
});
//to test
$('input').change(function() {
$('td[data-value]').eq($(this).data('index')).attr('data-value', this.value)
})
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td data-value="some-id" id="1">
<div class="dropdown">some elements</div>
</td>
</tr>
<tr>
<td data-value="some-id" id="2">
<div class="dropdown">some elements</div>
</td>
</tr>
</table>
<!--to change the value of attribute change the input value-->
<input data-index="0" />
<input data-index="1" />
Change event should bind directly to the div whose value is changed
<table>
<tr>
<td data-value="some-id">
<div>some elements</div>
</td>
</tr>
</table>
$("table > tbody > tr > td[data-value='some-id'] > div").change(function(){
//changed
alert();
});
$('div').trigger("change");
Check this here fiddle
Here is the code I want to process using javascript / jquery
EDITED THE BELOW CODE BLOCK FOLLOWING THE COMMENTS
<table>
<tbody>
<tr class="promote">
<td>1</td>
<td><span class="team_logo visible-lg visible-sm" style=""></span><a class="team_name " href="/team/show/7473/Power-Hiters">Power Hiters</a><span class="online" title="user is online"></span></td>
<td style="text-align:center">5</td>
<td style="text-align:center">10</td>
<td style="text-align:center">5</td>
<td style="text-align:center">0</td>
<td style="text-align:center">0</td>
<td style="text-align:center">6.713</td>
</tr>
<tr> <!-- Similar Above tr Content --> </tr>
<tr> <!-- Similar Above tr Content --> </tr>
<tr> <!-- Similar Above tr Content --> </tr>
</tbody>
</table>
I want to get the inner content/html of each <td> tag in a array using javascript / jquery
Extra Info:
When I tried it seems jquery strips the td and tr tags.
Actual thing I want to do is extract td in a multi dimensional array for each tr
the table structure:
<table>
<tbody>
<tr> <!-- Above tr Content --> </tr>
<tr> <!-- Above tr Content --> </tr>
<tr> <!-- Above tr Content --> </tr>
</tbody>
</table>
Since you want a multidimensional array, you will need to:
Make an array that will hold all table data
Iterate through all tr and create an array per row
Push that array in the first one, that holds all table data.
something like this:
var tableContent = [];
$('table tr').each(function(){
var trcontent = [];
$('td', this).each(function(){ trcontent.push($(this).text()); });
tableContent.push(trcontent);
})
console.log(tableContent);
example in jsfiddle
Try,
var arr = $("#cache").find('td').map(function(){ return this.textContent; }).get();
I have following two tables and a script having a function includePage(). Table with id=1 contains a menu whereas table with id2 is empty. It just contain one cell.
Now I want that when a user click on the first option in the menu of table having id=1, a dummypage1.html may appear in the table having id=2. Similarly when a click is on the second option of menu of table having id=1, a dummypage2.html may appear in the table having id=2.
How exactly can I tell the browser with the help of script to include the pages in table having id=2? Please help.
<table id="1">
<tr>
<td id="choice1" onclick="loadPage()">Initialize Session</td></tr>
<td id="choice2" onclick="loadPage()">Sessions Information</td></tr>
</tr>
</table>
<table id="2">
</table>
<script language="javascript">
function loadPage(){
//if (document.getElementById('choice1')
// {
// <iframe src="sessionInformationTable.html" width="727px" height="416px"></iframe>
// }
}
</script>
You can pass a parameter on loadPage function
<td id="choice1" onclick="loadPage(1)">Initialize Session</td></tr>
<td id="choice2" onclick="loadPage(2)">Sessions Information</td></tr>
<table id="2">
<tr><td id="TD"></td></tr>
</table>
<script>
function loadPage(whatPage) {
var url = (whatPage==1) ? "initSession.html" : "infoSession.html";
document.getElementById('TD').innerHTML = '<iframe src="'+url+'" width="727px" height="416px"></iframe>';
}
</script>
OR
<table id="2"><tr><td><iframe src="about:blank" id="content" style='width:100%;height:100%;"/></td></tr></table>
then on the javascript:
function loadPage(whatPage) {
document.getElementById('content').src = (whatPage==1) ? "initSession.html" : "infoSession.html";
}
If you are sure about following methodology
CLICK ON TABLE1 --> ROW1 --> displays --> Page1.html in TABLE-A
CLICK ON TABLE1 --> ROW2 --> displays --> Page2.html in table-B
this kind of designing leads to more tables when the age increases.
Better use this kind of style..
CLICK ON TABLE1 --> ROW1 --> displays --> Page1.html in TABLE-A
CLICK ON TABLE1 --> ROW2 --> displays --> Page2.html in TABLE-A
The thing is place an IFRAME inside the TABLE-A, and when clicking the ROW1 or ROW2 or ROW-n
set thet page target to that iframe.
<table>
<tr>
<td>
Page1</td>
<td>
Page2</td>
</tr>
</table>
<table>
<tr>
<td>
<iframe style="width: 400px; height: 400px;" id="myplace" name="myplace"></iframe>
</td>
</tr>
</table>
Another approach is to make a AJAX call to request the content, and place it in the table setting a innerHTML property.
For AJAX calls you can use a variety of libraries, I personally recommend jquery and dojotoolkit.
With jQuery:
<table id="1">
<tr>
<td id="choice1">Initialize Session</td></tr>
<td id="choice2">Sessions Information</td></tr>
</tr>
<table id="2">
<tr><td></td></tr>
</table>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript">
$(function() {
$("#choice1,#choice2").click(loadPage);
});
function loadPage(){
var id = $(this).attr("id");
if(id === "choice1") {
$("#2 td").load("initSession.html");
} else if (id === "choice2") {
$("#2 td").load("infoSession.html");
}
}
</script>