Change title on Table - javascript

I want to change a certain text on the table with a click of a button. In the table there's a header with the text a/d. With a click on a button I would want to have the user click on it to change the text a/d to say b/c.
$(document).ready(function(){
$("#testTable").prepend("<div><button class='clickButton'>Click Me</button></div>");
$('.clickButton').on("click", function(e){
e.stopPropagation();
$("#testTable").find('table').find('tbody').find('tr:eq(0)').find('th').html().replace("a/d","b/c");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable">
<tbody>
<tr>
<th colspan="3">This is a test
<br>This is a test
<br>(This is a test, a/d)
</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr></tbody></table>

$(document).ready(function() {
$("#testTable").prepend("<div><button class='clickButton'>Click Me</button></div>");
$('.clickButton').on("click", function(e) {
e.stopPropagation();
// find the element you want
var title = $('#testTable th')
// get and modify the text
var new_title = title.html().replace("a/d", "b/c")
// replace old title with new text
title.html(new_title)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable">
<tbody>
<tr>
<th colspan="3">This is a test
<br>This is a test
<br>(This is a test, a/d)
</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
Not sure why you were using such wonky selectors. Maybe this is just a watered down version of your code. As it is, you just need to grab the only th inside of your table with an id of testTable (using $('#testTable th')). In addition, you have to grab the text, modify it, then put it back where you want it.

Modify the contents of your click function as below
e.stopPropagation();
// Find the element. Remember: This will return all the 'th' elements in '#testTable'
var title = $("#testTable").find('th');
// Replace string
title.html(title.html().replace("a/d", "b/c"));
That should do it.

Related

Retrieving column values from a table by clicking row with jquery and html

I'm using html5 and jquery to set up a dynamic table, until then I can add the elements to the table without problems, but I can not retrieve the value of its columns. so I have the following questions:
How can I recover the table data by clicking the ROW?
Should I always use the data-name, id for example as in the first
line ?
$(document).on("change", "#TabClientesAdicionados", function(e) {
alert('?');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>
How can I recover the table data by clicking the ROW?
You can bind the click event to your TR elements and get the information.
Should I always use the data-name, id for example as in the first line?
Yes, because you don't want the parsed HTML to manipulate data. The data attributes are a better approach to keep related data (no HTML) to DOM elements.
Look at this code snippet
This approach binds the click event to TR elements
$('#TabClientesAdicionados tbody tr').click(function() {
var data = { name: '', id: '' };
$(this).children('td').each(function() {
var name = $(this).data('nome');
if (name) {
data.name = name;
}
var id = $(this).data('id');
if (id) {
data.id = id;
}
});
console.log(data);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr>
<table id="TabClientesAdicionados" class="table table-hover">
<thead>
<tr>
<th> ID </th>
<th> Name </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="Bruno_1">1</td>
<td data-nome="Bruno">Bruno</td>
<td>Details</td>
</tr>
<tr>
<td>2</td>
<td>Josep</td>
<td> Details </td>
</tr>
</tbody>
</table>
I would do as the following snippet.
You need to bind the event to the row tr ant then get each of its children.
By adding a data attribute you could set a column name. This could also help if you eventually needed to extract the value of an specific cell.
Incidentally you could also add a second data attribute named like data-value or something similar- This in case you are worried that your parsed html content might cause you trouble with the values.
$(document).ready(function() {
$("#mytable").on('click', 'tr', onCellClick);
//Bind the event to the table row
function onCellClick() {
let row = $(this); //get the jquery Object for the row
let rowValues = {}; //An empty object to hold your data
let temp;
//extract the value of every cell in the row
//Doing it this way gives you flexibility on the amount of colums you have
row.find('td').each(function(item) {
temp = $(this);
rowValues[temp.data('column')] = temp.text();
//this could be changed to
//rowValues[temp.data('column')] = temp.data('value);
//if you desire to use a separate data-value property
});
console.log(rowValues);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%" id="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td data-column="name" data-value="Jill">Jill</td> <!-Adding value property-->
<td data-column="lastname">Smith</td>
<td data-column="age">50</td>
</tr>
<tr>
<td data-column="name">Eve</td>
<td data-column="lastname">Jackson</td>
<td data-column="age">94</td>
</tr>
</table>

Get the text inside TD by neighbouring TH inner text

i need to get the value of a specific TD which has no ID or Class by the text value of a neighbouring TH using jQuery
Example:
<table>
<tbody>
<tr>
<th>Established</th>
<td>1976</td>
</tr>
<tr>
<th>Location</th>
<td>Baltimore, Maryland</td>
</tr>
</tbody>
</table>
I want to get the year 1976 (using jQuery) by searching for "Established"
the location of the tr / order isnt always the same.
Possible?
var year = $("th:contains('Established')").next().text();
console.log(year); // "1976"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Established</th>
<td>1976</td>
</tr>
<tr>
<th>Location</th>
<td>Baltimore, Maryland</td>
</tr>
</tbody>
</table>
the above code will work given the string Established will always be in that format (First-uppercase, no spaces, etc).
A more robust solution:
var year = $("th").filter(function(){
return /^established$/i.test($.trim($(this).text()));
}).nextAll().filter(function() { // If there's more sibling TD...
// get all that have exactly 4 numbers as text
return /^\d{4}$/.test($.trim($(this).text()));
}).first().text(); // ...but get the first one's text.
console.log(year); // "1976"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th> EstablishEd </th> <!-- Contains spaces and possible uppercase errors? -->
<td>1976</td>
</tr>
<tr>
<th>Location</th>
<td>Baltimore, Maryland</td>
</tr>
<tr>
<th>Workers</th>
<td>3100</td>
</tr>
</tbody>
</table>
https://api.jquery.com/contains-selector/
https://api.jquery.com/next/
https://api.jquery.com/text/
Yes, it is possible. jQuery's .filter(callback) method can be used to filter elements based on their content.
Select th elements
Filter selected th elements to only have "Established" ones
Select the td elements that follow these th elements
var years = $("th").filter(function() { //Get th elements that has "Established" as their text
return $(this).text() === "Established";
}).next("td"); //Get td elements that are next to these th elements;
console.log(years.text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Established</th>
<td>1976</td>
</tr>
<tr>
<th>Location</th>
<td>Baltimore, Maryland</td>
</tr>
</tbody>
</table>

handle mdl table check box

I'm using material desigin lite in my website
I have implemented this example:
http://www.getmdl.io/components/index.html#tables-section
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
my question is how to handle the check box in the table , they are added by the class : .mdl-data-table--selectable
there is no Id or class for them so what is the way to use them in javascript or sql server (deleting rows what i'm trying to implement)
You could check if they're are clicked with a jquery on method, why am not using the normal .click is to because of event delegation. Jquery docs do a perfect job explaining that.
Before I explain how I did it I will have a snippet that you can immediately play with under my explanation.
I basically used inspect element to look at the tables structure and it looked something like this
<tr>
<td>
<label>clickable checkbox code</label>
</td>
<td>Acrylic</td>
<td>25</td>
<td>$2.90</td>
With that information, we can do a lot. I personally used this to listen to clicks.
$(document).on("click",".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() { /* Code here*/ });
And with jquery parents & children methods we can achieve a lot, like read the content of all the table data with the following code in our click event listener
foo = $(this).parents().eq(2).children().text();
Or we can perhaps delete a whole row?
$(this).parents().eq(2).fadeOut();
What that would do is, look at the clicked checkbox using "this" as reference. Then go to levels up and remove a whole row.
<tr><!-- eq 2 -->
<td> <!-- eq 1 -->
<label>clickable checkbox code</label>
</td>
<td>Acrylic</td>
<td>25</td>
<td>$2.90</td>
Or we can check for the content of a specific child like this
var secondChildContent = $(this).parents().eq(2).children().eq(2).text();
Where secondChildContent will be return the content. You can always change the eq (The one after children) value to the desired child number you want. In the following case secondChildContent would return "Acrylic"
<tr>
<td> <!-- eq 1 -->
<label>clickable checkbox code</label>
</td>
<td>Acrylic</td> <!-- eq 2 -->
<td>25</td> <!-- eq 3 -->
<td>$2.90</td> <!-- eq 4 -->
$(document).ready(function() {
$(document).on("click", ".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {
//Removing row
$(this).parents().eq(2).delay(500).fadeOut(300);
var secondChildContent = $(this).parents().eq(2/*child number*/).children().eq(2).text();
var allChildrenContent = $(this).parents().eq(2).children().text();
var parentID = $(this).parents().eq(2).attr('id');
//Removing table on click of first checkbox
if (parentID == "header") {
$("#mdlTable").fadeOut(1000);
$("#log").html("<b>Table removed!</b>");
} else {
//Don't pay attention to this
$("#log").html(
"<b>Second child content is: </b>" + secondChildContent +
"<br><b>All children content is: </b>" + allChildrenContent
)
}
});
});
#log,
#mdlTable {
margin: 1% 1% 1% 1%;
}
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table id="mdlTable" class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr id="header">
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
<div id="log"></div>
</body>
When a checkbox is selected, the tr gets the class "is-checked" with Material Design Lite.
So your jquery can be like this:
$("table").find("tr.is-checked").each(function(){
// Do some stuff!
});
Update: Just read that the class "mdl-data-table--selectable " is being deprecated... This is the article on github
You can use this OnClick API function.
It uses like Android onClickListener, but it is for JavaScript.
TablesOnClickListener = function() {
var fun;
this.setOnClickListener = function(listener) {
fun = listener;
$(document).on("click", ".mdl-checkbox__ripple-container.mdl-js-ripple-effect.mdl-ripple--center", function() {
//$(this).parents().eq(2).delay(500).fadeOut(300);
var secondChildContent = $(this).parents().eq(2 /*child number*/ ).children().eq(2).text();
var allChildrenContent = $(this).parents().eq(2).children().text();
var parentID = $(this).parents().eq(2).attr('id');
fun({
sen: secondChildContent,
text: allChildrenContent,
id: parentID
});
});
}
How to use:
Step 1: create new TablesOnClickListener
var tocl = new TablesOnClickListener()
Step 2: set Item OnClickListener
tocl.setOnClickListener(function(data){
console.log(data);
});
Now your Tables Item Listener are all set!

Get row elements without using "closest" selector - jquery javascript

I have a table with 4 columns . 4th column is a button (not shown in below code). When I click on the button in a row, I want to get row elements.
I have done it using closest selector. Is there any way to find table row element "Without using closest". This is the requirement for some reason.
Please assume there is a button at end of each row
<table id="food">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr class='details'>
<td>1</td>
<td>Apple</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>2</td>
<td>Mango</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>3</td>
<td>Grape</td>
<td>Fruit</td>
</tr>
</tbody>
</table>
Here is the existing code, I need to replace closest. It will be awesome if I can use class names like $(this).somethin('.details');
$('#button1').click(function(){
var row = $(this).closest('tr');
//Do some stuff
})
Thanks
Use parents() and pass a class selector like
$('#button1').click(function(){
var row = $(this).parents('.details');
//Do some stuff
})
Note, you could also use closest in this case and pass the class selector
var row = $(this).closest('.details');

Copy cell value from table to textbox

I have the following table. I want to copy Id value on the seleced row to the text box. If I click on link "Select" in the first row the text box value will 0001.
If the table needs modification to get result better and faster, please leave your suggestion.
<div>
<input id="selectedId" type="text" />
</div>
<table cellspacing="1" class="tablesorter" id="nameList">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Id</th>
<th class="header">Gender</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<td>Akom Smith</td>
<td>0001</td>
<td>M</td>
<td>Select</td>
</tr>
<tr>
<td>Amara Sahara</td>
<td>0002</td>
<td>F</td>
<td>Select</td>
</tr>
<tr>
<td>John Lache</td>
<td>0003</td>
<td>M</td>
<td>Select</td>
</tr>
</tbody>
</table>
try this,
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td').eq(1).text();
$('#selectedId').val(id);
return false;
});​
simple cool demo
added notes for the comment below.
$('a.click-to-select').click(function() {
var id = $(this).closest('tr').find('td.id').text();
$('#selectedId').val(id);
return false;
});​
updated demo
Well, you know your key is the second td in the row. You can use the :nth-child selector like this:
<script type="text/javascript">
var getUniqueId = function() {
return $('td:nth-child(2)').text();
}
</script>
Of course you need a way to identify the correct , but I assume the code is supposed to be called from each and there you can use the parent selector.
Otherwise I'd put an id attribute in each row to make selecting easier.

Categories