displaying html table with javascript - javascript

Please am a newbie in programming, I really need your help in this. Please how can I hide an HTML table then display it with a button using.JavaScript?

Use document.querySelector to get the elements and the hidden attribute to show and hide the table. Use an event listener and listen for the click event on the button:
var table = document.querySelector("table");
table.hidden = true;
document.querySelector("button").addEventListener("click", function(event) {
table.hidden = false;
});
table {
text-align: center;
border-collapse: collapse;
}
td,
th {
padding: 0 5px;
border: 1px solid black;
}
<table>
<tr>
<th>Day</th>
<th>Rain</th>
</tr>
<tr>
<td>1</td>
<td>50 mm</td>
</tr>
<tr>
<td>2</td>
<td>21 mm</td>
</tr>
<tr>
<td>3</td>
<td>5 mm</td>
</tr>
</table>
<button>Show</button>

You can use a library called jQuery to do this extremely easily.
In your <head>, put <script src="code.jquery.com/jquery-latest.js></script>
Give your <table> an id, like this: <table id="myTable">
Add one button like this: <button onclick="$('#myTable').hide();">Hide</button>
And another like this: <button onclick="$('#myTable').show();">Show</button>
This will allow you to toggle the table's visibility.
I started writing this before #metarmask posted - his/her answer is much better, so you should probably take his/her advice.

Related

How do I display the content of closest <td> on javascript?

I have looked everywhere, but my code does not work at all. I simply want to display the content of the td I'm clicking on.
I have this table:
<tr class='rowData' tooltip='{caracteristicas}'>
<td nowrap class='Body'><a href='{caracteristicas}' target="_blank" style="color:black" onClick='return confirm("VOCÊ SERÁ REDIRECIONADO PARA:\r\r {caracteristicas}")'>{inputDescItem}</a></td>
<td nowrap class='Body' align='right'>{quantidade} {hiddenCodigoItem}</td>
<td nowrap class='Body' align='center'>{grupoEstoque}</td>
<td nowrap class='Body' align='center'>{inputCodigoItem}</td>
<td nowrap class='Body' align='center'>{btnAtualizaItem}</td>
<td nowrap class='Body' align='center'><button type="button" class="btnTest">Assign</button></td>
<td nowrap class='Body' align='center' class="testNameClass" name="output" style="display:none;">{caracteristicas}</td>
</tr>
I want it so that when I click on the CLICK ME tag, it will display (in a pop-up, alert, modal or anything) the content of the below tag (that I'm not displaying).
I have the following javascript:
$("btnTest").on("click", function() {
alert($(this).closest('tr').find('testNameClass').val());
});
I'm not very good at JS so please go easy on me.
Look like you missing
$(".btnTest") instead of $("btnTest")
and just try
$(".btnTest").on("click", function() {
alert($(this).parents('tr').find('.testNameClass').val());
});
To target specific elements using a class you need to use a dot in front of the class name. In your case .btnTest and .testNameClass.
$(".btnTest").on("click", function() {
alert($(this).closest('tr').find('.testNameClass').text());
});
As you are looking for the text inside the td element you should use .text() instead of .val()
In the below example column ent_3 is hidden and you will get its values using the script mentioned above.
$(".btnTest").on("click", function() {
alert($(this).closest('tr').find('.testNameClass').text());
});
.testNameClass {
display: none;
}
table {
border-collapse: collapse;
}
th, td { border: 1px solid #000; padding: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="dataTable">
<thead>
<tr>
<th>pk</th>
<th>ent_1</th>
<th>ent_2</th>
<th>ent_3</th>
</tr>
</thead>
<tbody>
<tr>
<td>PK Row 0</td>
<td>Ent_1</td>
<td><button type="button" class="btnTest">Assign</button></td>
<td class="testNameClass">Row 0 Ent_3</td>
</tr>
<tr>
<td>PK Row 1</td>
<td>Ent_1</td>
<td><button type="button" class="btnTest">Assign</button></td>
<td class="testNameClass">Row 1 Ent_3</td>
</tr>
<tr>
<td>PK Row 2</td>
<td>Ent_1</td>
<td><button type="button" class="btnTest">Assign</button></td>
<td class="testNameClass">Row 2 Ent_3</td>
</tr>
</tbody>
</table>
Your method will be handed a reference to the MouseEvent which represents details of the click. Since it is an Event, it has a currentTarget which represents an "element" in the so-called DOM ... an internal data-structure which represents the HTML. This data structure is in the form of a tree, where each node has one parent, two siblings, and some children. You can now write code to "walk up the tree" until you encounter a td node. The first one you come to is the innermost containing td.
I think you are targeting is incorrect use a . before the class name - also I see two classes in one element I set this up for you here have a look
https://jsfiddle.net/hw0ansyj/1/
$(".btnTest").on("click", function() {
alert($('.testNameClass').html());
});

jQuery selector for sibling of a label in a table

I'm writing a user-script for a third-party website and looking to select value inside a table which has a preceding TD with a label.
Question: I'm looking to get value1 as the result, but it's selecting the containing TD as well, so I get something else too.
Limitations
Can't modify the HTML to be more query-friendly (duh, it's not my site ;)
The table has no ids (I added them for easier discussion), not even the <table> itself has an id.
The count of the rows is dynamic, so no tr:nth-child.
Tried
I found this question: Selecting an element which has another element as direct child and used the direct selector (tr:has(> td:contains), but it still selects more than needed, because the outer TD also transitively contains label1 and has a sibling.
Notice that the background I set is transparent to show that multiple TDs are selected.
$(function() {
$('#result').text($('tr:has(td:contains("label1")) > td:nth-child(2)').text())
$('tr:has(td:contains("label1"))').css("background", "rgba(255,0,0,0.3)");
});
table { border-collapse: collapse; }
table, th, td { border: 1px solid black; }
td { padding: 4px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<tr>
<td id="outer">
<table>
<tr><td id="known-info">label1</td><td id="want-to-select">value1</td></tr>
<tr><td>label2</td><td>value2</td></tr>
</table>
</td>
<td id="outer-sibling">something else</td>
</tr>
</table>
<br/>
This should be "value1": "<span id="result"></span>"
You could use :not(:has(td)) in your selector so it should be
$('td:contains("label1"):not(:has(td))').next().text()
This will select td that contains label1 text, but it will ignore parent td because it has another td inside.
var el = $('td:contains("label1"):not(:has(td))').next()
$('#result').text(el.text())
el.css('background', 'blue')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="outer">
<table>
<tr>
<td id="known-info">label1</td>
<td id="want-to-select">value1</td>
</tr>
<tr>
<td>label2</td>
<td>value2</td>
</tr>
</table>
</td>
<td id="outer-sibling">something else</td>
</tr>
</table>
<br/> This should be "value1": "<span id="result"></span>"

jQuery - Selecting the first <a> in the first <td> of a <tr>

I have the following markup:
<tr>
<td>
<a>foo</a>
</td>
<td>bar</td>
<td>
<a class="delete-btn">delete</a>
</td>
</tr>
I've already hooked up a click event handler using jquery $(".delete-btn") the problem is that inside the click event handler I need the text of the first element (foo).
I'm already getting the value I need with this call:
$(this).closest("tr").children().first().children().first("a")
but I feel it's too verbose. Is there a better way to accomplish this?
I don't like this either, but... it's exactly what you're looking for:
$(this).closest("tr").find("> td:first-child > a");
You can make use of jQuery's :first pseudo-selector.
In this instance, your entire selector would be:
$('tr td:first a:first') (for the first <tr> only)
$('tr').find('td:first a:first') (for every <tr>)
Example:
$(document).ready(function(){
$('.delete-btn').click(function(){
$('tr').find('td:first a:first').hide();
})
});
table, tr, td {
border: 1px solid rgb(191,191,191);
border-collapse: collapse;
}
td {
padding: 12px;
}
.delete-btn {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><a>foo</a></td>
<td>bar</td>
<td><a class="delete-btn">delete</a></td>
</tr>
<tr>
<td><a>foo</a></td>
<td>bar</td>
<td><a>baz</a></td>
</tr>
</table>

Save the state of the Sort before leaving Page

I use a jquery plugin to sort my html table. It works well but I want to be able to "save my sort" after leaving the page and returning. if I leave the page and return - the sort starts over again.
I want to maintain the state of the sort - so when I return - it is entact how I left it...
Here is a working example...
https://rawgit.com/joequery/Stupid-Table-Plugin/master/examples/basic.html
here is the code...
<!DOCTYPE html>
<html>
<head>
<title>Stupid jQuery table sort</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../stupidtable.js?dev"></script>
<script>
$(function(){
$("table").stupidtable();
});
</script>
<style type="text/css">
table {
border-collapse: collapse;
}
th, td {
padding: 5px 10px;
border: 1px solid #999;
}
th {
background-color: #eee;
}
th[data-sort]{
cursor:pointer;
}
tr.awesome{
color: red;
}
</style>
</style>
</head>
<body>
<h1>Stupid jQuery table sort!</h1>
<p>This example shows how a sortable table can be implemented with very little configuration. Simply specify the data type on a <code><th></code> element using the <code>data-sort</code> attribute, and the plugin handles the rest.</p>
<table>
<thead>
<tr>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-.18</td>
<td>banana</td>
</tr>
<tr class="awesome">
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>2</td>
<td>-152.5</td>
<td>apple</td>
</tr>
<tr>
<td>-53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>195</td>
<td>-858</td>
<td>orange</td>
</tr>
</tbody>
</table>
</body>
</html>
The localStorage API is easy to use and can persist data between user sessions.
To store an item: localStorage.setItem('myCat', 'Tom');
And, to retreive an item: localStorage.getItem('myCat');
Keep in mind that all data is stored as strings.

Table with select/deselect and summarize option

I've created a table. Now I'm trying to have an onClick event add an option where I can click the squares inside the table to select them and click again to deselect them. At the end I wish to have it to display the total amount, by that I mean that it adds together the selected squars like a calculator would do.
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
</style>
<table>
<tr>
<td bgcolor="b8cce4">Modell</td>
<td>Trend</td>
<td>Titanum</td>
<td>Familiepakke</td>
<td>Førerassistentpakke</td>
<td>Stilpakke</td>
<td>Final price</td>
</tr>
<tr>
<td bgcolor="b8cce4"><b>Kuga</b></td>
<td>401000</td>
<td>420000</td>
<td>1000</td>
<td>10200</td>
<td>9200</td>
<td>$</td>
</tr>
<tr>
<td bgcolor="b8cce4"><b>C-max</b></td>
<td>320000</td>
<td>335000</td>
<td>1000</td>
<td>9400</td>
<td>3600</td>
<td>$</td>
</tr>
<tr>
<td bgcolor="b8cce4"><b>Focus</b></td>
<td>255000</td>
<td>325000</td>
<td>900</td>
<td>12500</td>
<td>9000</td>
<td>$</td>
</tr>
<tr>
<td bgcolor="b8cce4"><b>Mondeo</b></td>
<td>281000</td>
<td>361000</td>
<td>1100</td>
<td>9900</td>
<td>7200</td>
<td>$</td>
</tr>
I'm trying to make it so that I can click on one of the slots, able to select multiple, and at the end it will display the total price for all selected options.
I'd suggest you add/remove a class to your TD's. The "selected" can then have a different background color.
If you're using jQuery, you can use something like this (not tested):
$('td').click(function() {
$(this).toggleClass('selected');
console.log($(this).text());
});
Now you can use the CSS class to indicate it is selected.
I've added a JSFiddle here:
https://jsfiddle.net/vhwLxhsg/
I hope this is what you are looking for :-)
UPDATE:
Added calc. for each row, as requested: https://jsfiddle.net/vhwLxhsg/2/
UPDATE 2:
Vanilla JS version: https://jsfiddle.net/vhwLxhsg/4/

Categories