My table rows are being dynamically generated when I click "+" button. When I populate the fields and click submit button (next to "+") my JSON gets displayed to the console as shown in the image below.
When I generate JSON, I want to exclude the row which is unfilled (In this case 3rd row). Also, I want exclude column 1 (which consists of 3 buttons).
As we can see the JSON data is consisting lots of "\n" and \t" which is annoying.
I wrote following code by referring to some of the Stack Overflow pages.
function createJSON(){
var myJSON = { Key: [] };
var headers = $('table th');
$('table tbody tr').each(function(i, tr){
var obj = {},
$tds = $(tr).find('td');
headers.each(function(index, headers){
obj[$(headers).text()] = $tds.eq(index).text();
});
myJSON.Key.push(obj);
});
console.log(JSON.stringify(myJSON));
}
The rows that aren't filled have <input> elements. You can use a selector that excludes them.
$('table tbody tr:not(:has(input))').each(...)
You can get rid of all the newline and other whitespace characters around the headings with .trim():
headers.each(function(index, headers){
obj[$(headers).text().trim()] = $tds.eq(index).text();
});
To skip the first column, you can use :gt(0) in the selectors:
var headers = $('table th:gt(0)');
var $tds = $(tr).find('td:gt(0)');
Related
I have a table where the first column will always turn out to be unique. So when I remove the duplicate rows none would be removed. So i want to remove duplicates by eliminating the first row in the duplicate check. Each cell in the table may contain more than one value.
Input Table
Output table
I found the script for eliminating the duplicate rows from other question. But that is not what I am looking for. This question has something similar, but it is done only on the first column. I do not know how I can eliminate the first column from being accessed.
Script
<script>
var seen = {};
$('table tr').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
</script>
What I am trying to achieve
I would first eliminate the duplicate elements within the cell and then eliminate the rows with duplicate values. So from the input table above, in the column C_fb 4000 being written twice would be eliminated and then checked for duplicate rows.
Combined not selector and first selector, your code works!
var seen = {};
$('table tr').each(function() {
var txt = $(this).find("td:not(:first)").text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>id1</td><td>aaaaa</td><td>ccccccccc</td></tr>
<tr><td>id2</td><td>bbbbb</td><td>dddddddd</td></tr>
<tr><td>id3</td><td>bbbbb</td><td>dddddddd</td></tr>
<tr><td>id4</td><td>bbbbb</td><td>dddddddd</td></tr>
</table>
Use the :not and the :first jQuery-Selector. source: here
var seen = {};
$('table tr:not(:first)').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
I created a html table and filled it dynamically. So I want to alert the data inside a cell of the table when i clicked it. Here is the code for the table
JSP
<table id="load-opt"></table>
I'm filling the data inside dynamically like this
var fillTable = function($element, data) {
var t_head = $("<tr></tr>");
for(var ind=0; ind<data.length; ind++) {
//name is the name and desc is the description for each option
var $option = $("<tr></tr>");
$option.html("<td>"+name+"</td><td>"+desc+"</td>");
}
};
I tried this but it's not working, it's giving "undefined".
var choice = $('table#load-opt tr td');
choice.click(function(){
alert(choice); // also tried alerting choice.textContent, choice.innerHTML and choice.firstChild
});
you are actually trying to alert the 'td' object not value of from that object so you can use following to solve the query.Here i am using on instead of direct click function because of dynamically added data.
var choice = $('table#load-opt tr td');
choice.on('click', function(){
alert($(this).text());
});
You can use $(this).text() to fetch the data in table cell.
This is a link.
I have a table with 2 columns. One column with a checkbox and another one with plain text. I would like to generate an object array with the the check state and the text. I can go tr after tr with this:
$('#divInfCambios .frozen-bdiv tr').each(function(i)
{ ... }
How can access to td[1], check the state, and recover the text of td[2]?
I got the check state with:
$(this).find('input[type="checkbox"]').prop('checked')
I need now how to access node 2 (td[1]) and grab the text.
//run through each row
$('#divInfCambios .frozen-bdiv tr').each(function (i, row) {
var getInputByName = $(this).find('input[name="selection"]');
if (getInputByName.is(':checked') ){
}
// assuming you layout of the elements
var tds = $(this).find('td');
var getTdText = tds.eq(1).text();
});
I need to get the row id or index of user selected rows from jquery datatables without using the TableTool. Once I get the indexes or the Ids, I will use them to select these rows after the user comes back to the same page. How do I get the row Id or index of the select rows? Many thanks !
JSP code:
// when a row is selected, I want to get the row id or index
$('#userTable tbody tr').on('click', function()
{
var oTable = $('#userTable').dataTable();
var data = oTable.fnGetData(this);
selectedRowId = data[4];
alert(selectedRowId); // this printed "undefined"
var rowIndex = oTable.row(this).index();
alert(rowIndex); // this alert didn't even get invoked.
});
var rowIndex = oTable.row(this).index();
The above will work but you have to use:
var oTable = $('#userTable').DataTable();
which will return the API and should allow you to use row(this).index()
Instead Of:
var oTable = $('#userTable').dataTable();
However without seeing a working copy of the code (JSFiddle maybe) I am unsure why the fnGetData() is not working.
I'm trying to create my own script for a mobile version of my tables on my website.
Im currently using the script below to get the size of the table, and create new tables for each row, duplicating the headers into each new table.... (see: http://api.jquerymobile.com/table-reflow/ ) to get an idea of what I'm trying to achieve.
My script is as follows, but their is a js fiddle included at the bottom for a better example.
My problem is that I am only able to create 1 inside each table, where it should really be 3 rows, inside of each table. Again check the fiddle below for a proper example. Can anyone see why it is only creating 1 row in the table?
<script>
$(document).ready(function(){
var TableSize = $("table thead tr th").not("table.mobile_table thead tr th").size(); // Get # of columns
var i = 1;
var TableRowCount = $("table tbody tr").size(); // Get # of body rows
$("table thead tr th").each(function(){
$(this).attr("id", i++); // Give headers incrementing ID
});
for ( var CreateTables = 1; CreateTables < TableRowCount; CreateTables++ ){ // Create new table class="mobile_table" for each row
$("table").after("<table class='mobile_table'></table>");
}
$("table.mobile_table").each(function(){// Insert original headers into each row of new table as first column
var h = 1;
while ( ++h < TableSize){ // this is where the error is, it gives me the stuff below but x3 (the number of created tables)......
$("table.mobile_table").after("<tr><td></td><td></td><td></td></tr>");
}
});
console.log(TableSize);
console.log(TableRowCount);
});
</script>
See the fiddle: http://jsfiddle.net/Yf7KV/
Do you mean like this: http://jsfiddle.net/Yf7KV/2/
JS
$(this).append("<tr><td class='mobile_col_1'>Col 1</td><td class='mobile_col_2'>Col 2</td></tr>");
Explanation: Append will alllow you to append elements one after the another. html replaces with what you currently have