How to post data in JSON format from table using jQuery - javascript

I have a table as follows:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// I'd like a suggestion here
});
});
</head>
<body>
<table>
<tr><th>Name</th><th>Email</th></tr>
<tr><td>abc</td><td>abc#gmail.com</td></tr>
<tr><td>xyz</td><tr><td>xyz#gmail.com</td>
</table>
<button>click here</button>
</body>
</html>
I want after clicking that button it should create a json object conataining all data in table send it to the another url using jquery.

You can select table rows with data and then use $.fn.map method to extract necessary values and put them in array:
$('button').click(function() {
var data = $('table tr:gt(0)').map(function() {
return {
name: $(this.cells[0]).text(),
email: $(this.cells[1]).text()
};
}).get();
alert(JSON.stringify(data, null, 4))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>abc</td>
<td>abc#gmail.com</td>
</tr>
<tr>
<td>xyz</td>
<td>xyz#gmail.com</td>
</tr>
</table>
<button>click here</button>

Related

Display "no results found" if there is no matching search text input on the table

I saw this block of code from w3schools and it works perfectly fine. My only issue is that, if the inputted text is not present on the table, it doesn't display anything.
Here's the script code:
$(document).ready(function() {
$('#searchBar').on('keyup', function() {
var value = $(this).val().toLowerCase();
$('#tableData tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Here's the link to the w3schools article that I am talking about:
https://www.w3schools.com/bootstrap/bootstrap_filters.asp
I'd like to display a text saying "No results found" if there are no search results.
Here my solution for your problem I think this is the optimal solution for your problem.
Here the HTML which I get from the link you provided of w3school I added here a new row in HTML , little style and some conditional line in the JS code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.no-data {
display: none;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
<tr class="no-data">
<td colspan="4">No data</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
let check = true;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if($(this).text().toLowerCase().indexOf(value) > -1){
check = false;
$('.no-data').hide();
}
});
if(check){
$('.no-data').show();
}
});
});
</script>
</body>
</html>
the new row I added in HTML for showing "No data" is here:
<tr class="no-data">
<td colspan="4">No data</td>
</tr>
style for the new row
.no-data {
display: none;
text-align: center;
}
I added a some new conditional line in JS and after adding those the JS code is :
$(document).ready(function(){
$("#myInput").on("keyup", function() {
let check = true;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if($(this).text().toLowerCase().indexOf(value) > -1){
check = false;
$('.no-data').hide();
}
});
if(check){
$('.no-data').show();
}
});
});
Hope your problem is solved have a nice day .

How to display limited records instead of all records using jquery

In my iframe i have many records, but my requirement is to show only 4 records not all.
I will provide a "Show All" link, once click on show all link we have to display all records in the another tab.
I have added here a sample code with table, hope it will help you out.
html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td>
<td>Alice</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
</tr>
<tr>
<td>3</td>
<td>Carol</td>
</tr>
</tbody>
</table>
<button class="show-all">Show all</button>
<button class="show-default">Show default</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("table > tbody > tr").hide().slice(0, 2).show();
$(".show-all").on("click", function() {
$("tbody > tr", $(this).prev()).show();
});
$(".show-default").on("click", function() {
$("table > tbody > tr").hide().slice(0, 2).show();
});
</script>
</body>
</html>

extract integer from td

if I have a simple html table:
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td class="count test">423</td>
</tr>
</table>
how do I extract the integer from the td so that I can act on it?
the following code returns undefined:
function changeCount(){
var count = $("td.count.test").val();
alert(count);
}
changeCount();
complete html:
<html>
<head>
<title>Creation of array object in javascript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script language="javascript" >
function changeCount(){
var count = $("td.count.test").text();
console.log(count);
}
changeCount();
</script>
<style>
td{width:200px;text-align:center;}
</style>
</head>
<body>
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td class="count test">423</td>
</tr>
</table>
</body>
</html>
Not .val() for a <td>, but .text().
function changeCount(){
var count = $("td.count.test").text();
alert(count);
}
Note that if there are multiple such <td> elements, that'll return the contents of the first one in the DOM.
The .val() method is for getting the "value" attribute of <input>, <select>, and <textarea> elements. In either case, the DOM access will give you a string. If you need to do computation with the value, then it should be coerced to be a number via parseInt() or one of several other tricks.
The problem is you are trying to access stuff through JavaScript which is not available in the DOM tree at the time your function is executed. You need to make sure changeCount() is fired after the whole DOM tree has been loaded or at least after the element that is required by your function is part of the document DOM tree.
<html>
<head>
<title>Creation of array object in javascript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script language="javascript" >
function changeCount(){
var count = $("td.count.test").text();
console.log(count);
}
$(document).ready(function(){
changeCount();
});
</script>
<style>
td{width:200px;text-align:center;}
</style>
</head>
<body>
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td class="count test">four twenty three</td>
</tr>
</table>
</body>
</html>

I'm trying to add some rows to an HTML table, but it's failing

Note: this is meant to be a community wiki post
The following code using simple dom methods fails to add rows to the table. What's the issue?
<html>
<head>
<title>Javascript Test</title>
<script>
function addRow() {
var mytable = document.getElementById('mytable');
var row = document.createElement('tr');
var cell = document.createElement('td');
var text = document.createTextNode('This is a row');
cell.appendChild(text);
row.appendChild(cell);
mytable.appendChild(row);
}
</script>
</head>
<body>
<form action="#">
<table id="mytable">
<tr>
<td>This is a row</td>
</tr>
</table>
<input type="button" onclick="addRow()" value="Add A Row"/>
</form>
</body>
</html>
The issue at hand here is that the <table> element's correct structure is not present. When dealing with tables, the basic structure is:
<table>
<thead>
<tr>
<th>Heading for the table</th>
</tr>
</thead>
<tbody>
<tr>
<td>A row of data</td>
</tr>
</tbody>
</table>
The logic is that when dealing with tables, you want to keep the labels of the columns, and the actual data separate. Because most browsers fill in the <tbody> as part of the process of fixing broken HTML, few people realize this. When the browser sees you adding a <tr>, it doesn't know if you're trying to add it to the <thead> or the <tbody>, so it fails.
The following shows the correct method for adding the rows:
<html>
<head>
<title>Javascript Test</title>
<script>
function addRow() {
var mytbody = document.getElementById('mytbody');
var row = document.createElement('tr');
var cell = document.createElement('td');
var text = document.createTextNode('This is a row');
cell.appendChild(text);
row.appendChild(cell);
mytbody.appendChild(row);
}
</script>
</head>
<body>
<form action="#">
<table id="mytable">
<tbody id="mytbody">
<tr>
<td>This is a row</td>
</tr>
</tbody>
</table>
<input type="button" onclick="addRow()" value="Add A Row"/>
</form>
</body>
</html>
Any additional row needs to be added then take the first child of tableID and then use appendChild() method:
var tbl=document.getElementById("tbl");
var row=document.createElement("tr");
var cel=document.createElement("td");
cel.innerHTML='sometext';
row.appendChild(cel);
tbl.children[0].appendChild(row);

How to append tr to top of table

how can i append a new tr to the top of the table instead of under other tr.
Example:
<table width='100%'>
<tr><td>something</td><td>else here</td></tr>
<tr><td>something2</td><td>else here2</td></tr>
</table>
After a click event in jQuery, how can i place
<tr><td>something3</td><td>else here3</td></tr>
at the top of the table so it now looks like
<table width='100%'>
<tr><td>something3</td><td>else here3</td></tr>
<tr><td>something</td><td>else here</td></tr>
<tr><td>something2</td><td>else here2</td></tr>
</table>
Any help on this would be greatly appreciated.
$('table').prepend('<tr><td>something3</td><td>else here3</td></tr>');
or...
$('<tr><td>something3</td><td>else here3</td></tr>').prependTo('table');
More info on 'prepend': http://docs.jquery.com/Manipulation/prepend
More info on 'prependTo': http://docs.jquery.com/Manipulation/prependTo
This JS is IE specific at the moment, but it shouldn't be too hard to make it multi-browser compatible.
<html>
<body>
<script language="JavaScript">
function function1() {
var myRow = document.all.myTable.insertRow(0);
var myCell = myRow.insertCell();
myCell.innerText = "The added cell";
}
</script>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<td width="100">3</td>
<td width="100">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<button onclick="function1();">Add a cell</button>
</body>
</html>

Categories