HTML table and external Php file that change value - javascript

I have table like this:
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td><button>-</button> 5 <button>+</button></td>
</tr>
</table>
It is generated by Php and all information are from MySql DB..
I would like to activate buttons "-" and "+", so when I click minus, value 5 (in this case) will became 4 or when I click plus value 5 will became 6, and also in MySql DB some external php file will change values in real time..
I tried with some AJAX scripts, but I am stuck..
Please help.. Thanks..

Try storing first the value in an HTML element like <span></span>, and assign class tag for the + and - button:
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td><button class="minus">-</button> <span>5</span> <button class="plus">+</button></td>
</tr>
</table>
Then create the script:
$(document).ready(function(){
$(document).on("click", ".minus", function(){ /* WHEN MINUS IS CLICKED */
var elem = $(this); /* THE ELEMENT CLICKED */
var id = elem.parent().siblings(":first").text(); /* ID OF THIS ROW IN THE DATABASE */
var current_no = Number(elem.closest("td").find("span").html()); /* CURRENT VALUE OF THIS ROW */
var new_no = current_no - 1; /* REDUCE ONE VALUE */
elem.closest("td").find("span").html(new_no); /* REPLACE WITH THE NEW NUMBER INSIDE THE SPAN */
});
$(document).on("click", ".plus", function(){ /* WHEN PLUS IS CLICKED */
var elem = $(this); /* THE ELEMENT CLICKED */
var id = elem.parent().siblings(":first").text(); /* ID OF THIS ROW IN THE DATABASE */
var current_no = Number(elem.closest("td").find("span").html()); /* CURRENT VALUE OF THIS ROW */
var new_value = current_no + 1; /* ADD ONE VALUE */
elem.closest("td").find("span").html(new_no); /* REPLACE WITH THE NEW NUMBER INSIDE THE SPAN */
});
});
For updating the data in your MySQL database in real-time, you need to use AJAX.
$.ajax({ /* START AJAX */
type: "POST", /* METHOD TO USE TO PASS THE DATA */
url: "update.php", /* FILE DESTINATION OF THE DATA */
data: {"id": id, "value": new_value} /* THE DATA TO BE PASSED ON */
}); /* END OF AJAX */
On the update.php file, it must contain the UPDATE query:
/*** YOUR ESTABLISHED CONNECTION HERE ***/
$stmt = $connection->prepare("UPDATE table SET value = ? WHERE id = ?");
$stmt->bind_param("ii", $_POST["value"], $_POST["id"]);
$stmt->execute();
Here is a jsfiddle (but without the AJAX).

If you use a form to fetch this value, you can use the <input type="number" />:
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td><input type="number" value="5" /></td>
</tr>
</table>
Modern web browsers will display buttons to decrease or increase the value.

Using JS/jQuery:
/* JS: */
var counter = 5;
$(".down").on("click", function() {
if (counter > 0) {
counter--;
$('.anumber').text(counter);
}
});
$(".up").on("click", function() {
counter++;
$('.anumber').text(counter);
});
<!-- HTML: -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td>
<button class="down">-</button> <span class="anumber">5</span>
<button class="up">+</button>
</td>
</tr>
</table>
JSFiddle

Better if you can change your html and add some classes, check the following suggestion :
$(function(){
$('body').on('click' ,'.minus', function(){
var current_number = parseInt($(this).parent().find('.number').text());
current_number--;
$(this).parent().find('.number').text(current_number);
});
$('body').on('click' ,'.plus', function(){
var current_number = parseInt($(this).parent().find('.number').text());
current_number++;
$(this).parent().find('.number').text(current_number);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr align="left" valign="top">
<th>ID</th>
<th>NAME</th>
<th>VALUE</th>
</tr>
<tr align="left" valign="top">
<td>1</td>
<td>Item 1</td>
<td>
<button class='minus'>-</button>
<span class='number'>5</span>
<button class='plus'>+</button>
</td>
</tr>
</table>
Hope this helps.

Related

How to get the id of a clicked element within a table row?

I have the following table
<table width="97%" border="1" class="queueList">
<thead>
<tr>
<th>Delete</th>
<th>Queue Name</th>
<th>Current queue length</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.ImportQueues)
{
<tr id="watchRow">
<td id="DeleteButton">X</td>
<td id="QueueName", value="#item.QueueName">#item.QueueName</td>
<td>#item.CurrentQueueLength</td>
</tr>
}
</tbody>
how can I get the value of the element "QueueName" when "#DeleteRow" is clicked, using JQuery ?
So far I have
$("body").on("click", "#DeleteButton", function (event) {
var queueName = $(event.target).closest("div.queueList").find("#QueueName");
alert(queueName);
}
Use the data attribute to store the desired value on the button itself
<tr class="watchRow">
<td class="DeleteButton" data-queuename="#item.QueueName">X</td>
<td class="QueueName">#item.QueueName</td>
<td>#item.CurrentQueueLength</td>
</tr>
then on click of TD (by the way, it should be a button)
$("body").on("click", ".DeleteButton", function() {
var queueName = $(this).data("queuename");
alert(queueName);
}
If you want to use this name on other buttuns also, like edit etc. then it is better to assign it to the whole row:
<tr class="watchRow" data-queuename="#item.QueueName">
<td class="DeleteButton">X</td>
<td class="QueueName">#item.QueueName</td>
<td>#item.CurrentQueueLength</td>
</tr>
and read it like this:
$("body").on("click", ".DeleteButton", function() {
var queueName = $(this).closest('tr').data("queuename");
alert(queueName);
}
Without JQuery
<tr id="watchRow">
<td class="DeleteButton" onclick="deleteItem(#item.QueueName)">X</td>
<td value="#item.QueueName">#item.QueueName</td>
<td>#item.CurrentQueueLength</td>
</tr>
<script>
function deleteItem(item) {
alert(item)
}
</script>
With JQuery
<tr id="watchRow">
<td class="DeleteButton">X</td>
<td value="#item.QueueName">#item.QueueName</td>
<td>#item.CurrentQueueLength</td>
</tr>
<script>
$(".DeleteButton").on("click", function() {
alert($(this).next("td").html());
}
</script>
</script>

Classes on button click not coming off all at once

I have an admin users table on a web app I'm building, and I want the admins to be able to make other people admins, validate, and delete accounts. But to make it mobile friendly, I want to hide two columns on mobile, but also provide a button for the user with the option of seeing everything if they want to. The issue is, it takes three button pushes to reveal the whole table (when it should only be one), and the button won't let me reverse the action. Here is the JS code:
const showTable = document.getElementById("showTable");
showTable.addEventListener("click", function() {
const hiddens = document.getElementsByClassName("tableHide");
for (h of hiddens) {
if (h.classList.contains("tableHide")) {
h.classList.remove("tableHide");
showTable.innerText = "Hide Table";
} else {
h.classList.add("tableHide");
}
}
});
.tableHide {
display: none;
}
<button type='button' id='showTable'>Show Table</button>
<table>
<thead>
<th>First Name</th>
<th class='tableHide'>Last Name</th>
<th class='tableHide'>Username</th>
<th>Validated</th>
<th>Admin</th>
<th></th>
</thead>
<tbody>
<tr id='1'>
<td>Joe</td>
<td class='tableHide'>Bob</td>
<td class='tableHide'>joebob#gmail.com</td>
<td><input type='checkbox' id='validated'><label for='validated'></label></td>
<td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
<td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
</tr>
<tr id='2'>
<td>Bob</td>
<td class='tableHide'>Joe</td>
<td class='tableHide'>bobjoe#gmail.com</td>
<td><input type='checkbox' id='validated'><label for='validated'></label></td>
<td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
<td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
</tr>
</tbody>
</table>
And a working JS fiddle with the issue: https://jsfiddle.net/7oh6rch3/1/
Where did I mess up in my logic?
Your mistake was the way you selected the HTML Elements and the way you assigned / removed the CSS classes. I'd use two css classes to solve this:
const showTable = document.getElementById("showTable");
showTable.addEventListener("click", function() {
const hiddens = document.getElementsByClassName("tableHide");
for (h of hiddens) {
if (h.classList.contains("mobile")) {
h.classList.remove("mobile");
showTable.innerText = "Hide Table";
} else {
h.classList.add("mobile");
}
}
this.innerHTML = this.innerHTML == 'Show Table' ? 'Hide Table' : 'Show Table';
})
.mobile
{
display: none;
}
<button type='button' id='showTable'>Show Table</button>
<table>
<thead>
<th>First Name</th>
<th class='tableHide mobile'>Last Name</th>
<th class='tableHide mobile'>Username</th>
<th>Validated</th>
<th>Admin</th>
<th></th>
</thead>
<tbody>
<tr id='1'>
<td>Joe</td>
<td class='tableHide mobile'>Bob</td>
<td class='tableHide mobile'>joebob#gmail.com</td>
<td><input type='checkbox' id='validated'><label for='validated'></label></td>
<td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
<td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
</tr>
<tr id='2'>
<td>Bob</td>
<td class='tableHide mobile'>Joe</td>
<td class='tableHide mobile'>bobjoe#gmail.com</td>
<td><input type='checkbox' id='validated'><label for='validated'></label></td>
<td><input type='checkbox' id='isadmin'><label for='isadmin'></label></td>
<td class='delButCont'><button type='button' class='deleteButtons'>Delete</button></td>
</tr>
</tbody>
</table>
also updated your fiddle:
https://jsfiddle.net/7oh6rch3/2/
That's because the result of document.querySelectorAll is a live collection, so every time you remove the class tableHide from an element - it is also removed from the collection, which makes for skip an additional element.
You could copy the elements to an array to preserve the result of selection (to make it no live):
const hiddens = [...document.getElementsByClassName("tableHide")];

Unable to get data from the second column of a table on clicking of the button in third column

I have a table which has four columns second being a paragraph field , the third being an input field and fourth being a button . What i want is on clicking of the button row the data from the paragraph column should be applied to the input field i.e third row .
Its not possible to select every row using each function as every row is different and theres only few rows like this . How can this be done
I have tried this but it didn't work
var or1 = $("#tab_logic button");
or1.each(function() {
$(this).click(function(){
alert("u");
var u = $(this).parent("tr").find('td:first').html();
alert(u);
});
});
Without knowing the exact HTML, I made this based on your explanation. If I understand correctly, this is what you want to achieve?
$("button").click(function() {
var row = $(this).closest("tr");
var name = row.find("p").html();
var input = row.find("input");
input.val(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>ID</th>
<th>Name</th>
<th>Input</th>
<th>Button</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><p>John Doe</p></td>
<td><input type="text" placeholder="Name"/></td>
<td><button type="button">Set name</button></td>
</tr>
<tr>
<td>1</td>
<td><p>Jane Doe</p></td>
<td><input type="text" placeholder="Name"/></td>
<td><button type="button">Set name</button></td>
</tr>
</tbody>
</table>
Another solution would be
var or1 = $("#tab_logic button");
or1.each(function() {
$(this).click(function() {
var text = $(this).closest('tr').children('td:eq(1)').children().first().html();
$(this).closest('tr').children('td:eq(2)').children().first().val(text);
});
});
#tab_logic td{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab_logic">
<tr>
<td>one</td>
<td><p>I'm just a paragraph</p></td>
<td><input type="text"/></td>
<td><button>button</button></td>
</tr>
<tr>
<td>two</td>
<td><p>I'm just another paragraph</p></td>
<td><input type="text"/></td>
<td><button>button</button></td>
</tr>
</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!

How can I get all <tr>-s from a <tbody> and convert it to String?

I have a HTML Table:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
<th>Message</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
<td>etc</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
<td>etc</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>etc</td>
</tr>
</tbody>
</table>
<input type="button" onclick="getTbodyString();" value="get it"/>
I want some jquery/javascript, which can get the inside of the tbody by String. Like:
function getTbodyString() {
var tbodyString = $(.......).text(); //or val()?
alert("the body - "+tbodyString);
}
The result in the alert window should be this:
the body - <tr><td>Viktor</td><td>Male</td><td>etc</td></tr><tr><td>Melissa</td><td>Female</td><td>etc</td></tr><tr><td>Joe</td><td>Male</td><td>etc</td></tr>
Could anyone help me?
You need to html() instead of text(). The function text will not return you tags but returns plain text within tags.
var tbodyString = $('#tbodyID').html();
I would use native javascript function here that would be faster then jquery.
var tbodyString = document.getElementById('tbodyID').innerHTML; 
Just Replace your function code as below :
function getTbodyString() {
var tbodyString = $('#tbodyID').html();
alert("the body - "+tbodyString);
}

Categories