Getting Table Element - javascript

I want to get an element for a specific row in my HTML table.
Here is my table.
<tr class="inner2-top">
</tr>
I fill this table using Javascript for the following class:
<td class="ddu-orl">
So far I have around 9 rows. I was wondering how I would get the data for a specific row.
So far I have the following code but it seems to log all of the data for that class. What about for a specific row?
function removeRoute() {
var objectId = $(".inner2-top").find(".ddu-orl").text();
console.log(objectId);
}
I run the following code using the following HTML:
<td class="status1"><img src="images/cross.png" href="#" onclick="removeRoute()" width="12" height="12" alt="cross">

Within an onclick function if you pass this as argument it makes it easy to isolate instance.
<img onclick="removeRoute(this)">
Now you can traverse the DOM from the image. One path is first look up to the closest row, then looking within that row for the element wanted
function removeRoute(elem) {
var objectId = $(elem).closest('tr').find(".ddu-orl").text();
console.log(objectId);
}

Related

Javascript - hiding table rows based on enclosed TD content

I'm writing a python app which is displaying an HTML table of pupil capabilities. I want to add the ability to filter the view depending on those capabilities - including multiple filters at the same time, hence wanting to do this in javascript (managing this via database lookups was becoming unwieldy).
I have a table which has a grid of capabilities (true/false), and to each 'false' I have added a class, such as 'pupil_web', and I have written a javascript function which will hide the on that row, triggered by a button at the top of each column.
But what I want is for the function to hide the entire row if it contains a td of that class, and I can't work out how to do it. I'm a fairly basic Python programmer, and this is my first project of any reasonable size; so far it's going well, but having spent a couple of hours trying to get this working (and getting as far as hiding the TD, not the enclosing row), I'd appreciate some help or a pointer in the right direction - I can't work out how to make the function look inside the row's content, only to look at each individual TD.
Here's the Javascript (note that at the moment I'm using Jinja2 to create multiple functions, each one for each capability, where the name of the function and the capability DIV content are linked - again I'm sure I'm not doing that in the best manner (creating a function for each column), but at the moment I'd rather get it working in the present form and then hopefully optimise in the future).
function toggle_{{ capability }}() {
var table, td, i;
table = document.getElementById("myTable");
td = table.getElementsByClassName("div_{{ capability }}");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < td.length; i++) {
if (td[i].style.display === "none") {
td[i].style.display = "";
} else {
td[i].style.display = "none";
}
}
}
Here's a simple version of the HTML table (the real one has about 20 columns, with a class tag present for the column entry that would lead to a row being hidden).
<tr>
<td>
Pupil 1
</td>
<td>
<img class="pupil_web" src="static/cross.png" width="25">
</td>
<td>
<img src="static/tick.png" width="25">
</td>
</tr>
<tr>
<td>
Pupil 2
</td>
<td>
<img src="/static/tick.png" width="25">
</td>
<td>
<img class="pupil_email" src="static/cross.png" width="25">
</td>
</tr>
Any pointers in the right direction would be greatly appreciated - I've not been at this long (I'm about 4 months in to a 2-year self-study plan), but I'm trying to learn rather than just give up and/or paste code in without understanding it.
Try this:
function toggle_{{ capability }}() {
var table, td, i;
table = document.getElementById("myTable");
td = table.getElementsByClassName("div_{{ capability }}");
// Loop through all table rows, and hide those who don't match the search query
if (td.parent().style.display === "none") {
td.parent().style.display = "";
} else {
td.parent().style.display = "none";
}
}
}

Prepending table row into list

In my code I have this piece that is part of
<ul id="more-menu" class="more-menu arrow_box">
...
</ul>
In my .js files I want to add elements to this list and one of them is supposed to be a table with one row that will hold icons, my code for adding table:
$(".more-menu.arrow_box").prepend('</table>' + '</li>');
$(".more-menu.arrow_box").prepend("<td id='4th'>XYZ</td>");
$(".more-menu.arrow_box").prepend("<td id='3rd'>XYZ</td>");
$(".more-menu.arrow_box").prepend("<td id='2nd'>XYZ</td>");
$(".more-menu.arrow_box").prepend("<td id='1st'>XYZ</td>");
$(".more-menu.arrow_box").prepend("<li style='background-color: #444444'><table class='ribbon-menu'>");
Basically three of them are just a div with span (clickable icons) and one is another arrow box with some elements in it.
And as a result I get:
<li style="background-color: #444444"><table class="ribbon-menu"></table></li>
folowed by <td></td> elements
Properly construct in DOM
One possibility how to insert the data piece by piece is to insert the full outer elements into the object space and alter them accordingly afterwards.
Thus:
$(".more-menu.arrow_box").prepend("<li style='background-color: #444444'><table class='ribbon-menu'></table></li>");
table = $(".more-menu.arrow_box").children().first().find('table')
table.append("<td id='1st'>XYZ</td>")
table.append("<td id='2nd'>XYZ</td>")
table.append("<td id='3rd'>XYZ</td>")
table.append("<td id='4th'>XYZ</td>")
Although creating a <tr> for the data would be also nice :)

jQuery click event on dynamically generated elements for calendar?

The answer to the following question,
var counter = 0;
$("button").click(function() {
$("h2").append("<p class='test'>click me " + (++counter) + "</p>")
});
$("h2").on("click", "p.test", function(){
alert($(this).text());
});
I have a dynamically generated calendar that when you click on an individual day, instead of opening a new web page, it swaps the calendar for the events of the day. The events are listed in a table and I want to be able to click on a row and and have it trigger a function which uses location.assign(). So each row looks like the following,
<tr id="message-7">
New page in calendar loads and creates,
<tr id="message-132">
Clicking does not trigger the function. In the example from the other question, it accesses the text of the element in order to make the element unique as opposed to giving the element a unique id # as in my situation.
Am I approaching the problem the wrong way? Could I add something like a "title=132" tag that I could reference?
Ideally try not to make too much meaning out of the ID. Instead use data as shown here.
So instead of
<tr id="message-7">
use
<tr id="1234567" data-message="7">
Then in code you can address the data as:
var messageVal = $("#1234567").data("message")
And if you need to add a generic click event then you might want to use a dummy css class assignment for all appropriate TR's:
<tr id="1234567" data-message="7" class="messageRow">
so that you can write
$(".messageRow").on("click", function(event){
event.preventDefault()
var messageVal = $(this).data("message")
This is useful in the case where only some TR's will contain clickable content - just don't assign the class to the others.

Assign id's (1,2,..etc) to a dynamic html table

Trying to achieve functionality in the linked picture.
The table grows as users click on the add button. I'm trying to replace the text inside the first column of the newly added td with the length of the table. I'm new to jQuery and not sure how to do that. Any help would be great.
It will be easier to answer you with your code but you can know the added row number with $('#yourTBodyID > tr').length
Have a look to this code :
HTML
<table>
<thead>
<tr>
<th>Zone ID</th>
<th>Zone Description</th>
<th><button onclick="addRow();">Add Row</button></th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
JS :
function addRow() {
var rowNum = $('#tableBody > tr').length + 1;
$('#tableBody').append('<tr>'
+ '<td>' + rowNum + '</td>'
+ '<td><input type="text"/></td>'
+ '<td><button>Disable</button></td>'
);
}
jsFiddle
Hope it helps ;)
You'll face a few more problems, more than just showing the number on the recently created tr. As you don't write down any code, I'm note sure at which point of the development you are, or which functionalities have you created already. I'll briefly try to explain how to achieve it, just showing you the path.
Add button should find in the DOM a valid <tr>to .clone(). It could be a "seen tr" or a template one. In the first situation you should clean the information in the input.
Once you have saved that cloned node into a variable, you should prepare it for insertion.
Counting the <tr> lines (it'd help if you have a classname on them) and assign the .length() to the first <td> using .text()
Changing name attribute on the input inside the second <td>tag. Otherwise when the form is sent to the server, you will loose every input with the same name which prior the last one.
On the last <td> tag you have a disabled button. It won't have any attached event on your brand new element. You can attach it here, or if you prefer, you can add the event on the very beginning using something like $('table').on('click','.disable-button',function(e){}). Doing that instead of $(.disable-button).click() will assure you that elements with this class created after DOM .ready()fires up will get this event.
I hope it helped you

Copy HTML Table to Text Box Using JQuery/JS

My problem has left me trying many solutions and stumped for a while now. My problem is exactly this:
There's a HTML table and a button on a page. Upon pressing the button, a script will run, copying the contents of the cells in the table into a text box. Here is the code for the table:
<table>
<tr><th></th><th>Category1</th></tr>
<tr><td>1.</td><td class="rule">Rule1</td></tr>
<tr><td>2.</td><td class="rule">Rule2</td></tr>
<tr><th></th><th>Category2</th></tr>
<tr><td>3.</td><td class="rule">Rule3</td></tr>
<tr><td>4.</td><td class="rule">Rule4</td></tr>
<tr><th></th><th>Category3</th></tr>
<tr><td>5.</td><td class="rule">Rule5 </td></tr>
<tr><td>6.</td><td class="rule">Rule6</td></tr>
<tr><td>7.</td><td class="rule">Rule7</td></tr>
<tr><th></th><th>Category4</th></tr>
<tr><td>8.</td><td class="rule">Rule8</td></tr>
</table>
My first thoughts were to write a script that iterated through the table and copied the contents of each cell (and creating a new line after every 2 cells). I realized very quickly, that I had no idea how to do that. After some searching I was able to come up with a script that clones the table, and it actually works quite well. This code is here:
$("button").click(function () {
$("table").clone().appendTo(".copy");
});
There are two problems that arise from using this method, however. I want plaintext, not a carbon copy of the table. The other problem is that this method only works when I clone the table into a div, it will not work when I try to clone it to a text box.
I've searched for a while for something similar to this and can only find solutions to copying single rows or cells. I had originally started there but couldn't figure out a way to write a loop that started at the beginning of the table and iterated through the entire thing, copying the contents as it iterated row by row (and creating a new line with each new row that it encountered). The loop would obviously end when there were no more rows to iterate through... This all sounds so simple to do, I know there must be a way.
Please Note: This script will be applied to a Site.Master Page so the script must be able to run for a plethora of tables. All of the tables follow the same structure shown above, but some will have more rows than others.
Any ideas? Any help is greatly appreciated.
You could use the .each() JQuery Method:
JS
function cloneTableContents()
{
$("table tr").each(function()
{
$(this).children().each(function()
{
$(".copy").append($(this).text());
});
});
}
JS For All Tables On Page In Order
function cloneTableContents()
{
$("table").each(function()
{
$(this).find("tr").each(function()
{
$(this).children().each(function()
{
$(".copy").append($(this).text()+" ");
});
});
});
}
HTML
<table id="mine">
<tr><th></th>
<th>Category1</th>
</tr>
<tr><td>1.</td><td class="rule">Rule1</td></tr>
<tr><td>2.</td><td class="rule">Rule2</td></tr>
<tr>
<th></th>
<th>Category2</th>
</tr>
<tr><td>3.</td><td class="rule">Rule3</td></tr>
<tr><td>4.</td><td class="rule">Rule4</td></tr>
<tr>
<th></th><th>Category3</th>
</tr>
<tr><td>5.</td><td class="rule">Rule5 </td></tr>
<tr><td>6.</td><td class="rule">Rule6</td></tr>
<tr><td>7.</td><td class="rule">Rule7</td></tr>
<tr>
<th></th><th>Category4</th>
</tr>
<tr><td>8.</td><td class="rule">Rule8</td></tr>
</table>
<textarea class="copy"></textarea>
<button onclick="cloneTableContents('mine','.copy');">Copy</button>
Working Example:
http://casewarecomputers.com:8088/soHelp.html

Categories