Inner text using javascript / jquery - javascript

I have a datatable and I want to extract the column 1
var usernames = dataTableTeamMembers.columns(1).data();
But it gives me an array like this:
Array(2)
0
:
"admin"
1
:
"catalao"
I only want the text, not the html.
How do I extract the innertext of that a tag?


There's two approaches:
With .column() (with each one):
$(document).ready(function() {
var dataTableTeamMembers = $('#example').DataTable();
dataTableTeamMembers.column(1).data().each(function(username, index){
console.log(username);
});
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger</td>
</tr>
<tr>
<td>2</td>
<td>Garrett</td>
</tr>
<tr>
<td>3</td>
<td>Tiger</td>
</tr>
<tr>
<td>4</td>
<td>Ashton</td>
</tr>
<tr>
<td>5</td>
<td>Garrett</td>
</tr>
</tbody>
</table>
And .columns() (returns array):
$(document).ready(function() {
var dataTableTeamMembers = $('#example').DataTable();
console.log(dataTableTeamMembers.columns(1).data()[0]);
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger</td>
</tr>
<tr>
<td>2</td>
<td>Garrett</td>
</tr>
<tr>
<td>3</td>
<td>Tiger</td>
</tr>
<tr>
<td>4</td>
<td>Ashton</td>
</tr>
<tr>
<td>5</td>
<td>Garrett</td>
</tr>
</tbody>
</table>


You have 3 options, depending on what you need
1 using DataTables API
var table = $('#your_table_id').DataTable().data();
for(var i = 0; i < table.length; i++)
{
var tbl_obj = table[i];
//do stuff
console.log(JSON.stringify(table[i]))
}
2 Using jquery to get all row html
$('#your_table_id tr').each(function() {
console.log($(this).html());
});
3 to get a specific cell on a row, by cell class
$('#your_table_id tr').each(function() {
var obj = $(this).find(".cell_class").html();
});
Use the one which fits more to your needs.

Related

how can i get table column data using column header name in jquery

I am trying to get table column data by using the name of header(th) in jquery.
x1 x2 y1 y2
2 1 2 4
4 4 5 3
7 5 3 4
7 3 1 9
in this case i want to get data by x2 then it should return me 1,4,5,3
my table-
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>x1</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>122</td>
<td>12</td>
</tr>
</tbody>
</table>

Here's a way using jQuery filter() function and CSS nth-child() selector:
<table border="1" class="dataframe" id="table">
<thead>
<tr style="text-align: right;">
<th>x1</th>
<th>x2</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>1</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td>7</td>
<td>5</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>7</td>
<td>3</td>
<td>1</td>
<td>9</td>
</tr>
</tbody>
</table>
<script>
let chosenHeaderText = 'x2',
tableHeaders = $('#table th'),
chosenHeader = tableHeaders.filter(function(header) {
return tableHeaders[header].innerHTML == chosenHeaderText;
}),
chosenHeaderIndex = chosenHeader[0].cellIndex + 1,
rows = $('#table tr td:nth-child(' + chosenHeaderIndex + ')');
rows.each(function(row) {
console.log(rows[row].innerHTML);
});
</script>
You can replace the chosenHeaderText variable with whichever header you need.

You can utilise jQuery map() function to first get the index of your header and on that basis iterate the body of the table.
const getData = (column) => {
let indx
$('thead').find('th').map(function(i){
if($(this).text() === column)
indx = i
})
$('tbody').find('tr').map(function(i){
let chk = $(this).find('td').eq(indx).text()
console.log(chk)
})
}
let data1 = getData(`x1`)
console.log(data1)
console.log(`=================`)
let data2 = getData(`y1`)
console.log(data2)
console.log(`=================`)
let data3 = getData(`y2`)
console.log(data3)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th>x1</th>
<th>y1</th>
<th>y2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1A</td>
<td>122</td>
<td>12</td>
</tr>
<tr>
<td>1B</td>
<td>123</td>
<td>13</td>
</tr>
<tr>
<td>1C</td>
<td>124</td>
<td>14</td>
</tr>
</tbody>
</table>

select elements inside the cell without selecting the table row

I'm trying to create a selectable table using bootstrap. Is there a way to select elements inside the cell without selecting the table row?
As per the code snippets below, is there a way to select the textbox without selecting the table row?
I'm trying to replicate the functionality of jqueryui/selectable
Thanks!
$(function() {
var $table = $('#table');
$table.on('click-row.bs.table', function(e, row, $element) {
alert("Row is selected");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="table"class="table table-hover" data-toggle="table">
<thead>
<tr>
<th>#</th>
<th>Data</th>
<th>User</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>0.52,1.041</td>
<td>Samantha</td>
<td>40%</td>
</tr>
<tr>
<td>2</td>
<td>226,134</td>
<td><input value="Martin"></td>
<td>-20%</td>
</tr>
<tr>
<td>3</td>
<td>0.52/1.561</td>
<td>Damien</td>
<td>26%</td>
</tr>
</tbody>
</table>

A simple stop propigation will do I think. Try:
$("input").click(function(e) {
e.stopImmediatePropagation();
});
$(function() {
var $table = $('#table');
$table.on('click-row.bs.table', function(e, row, $element) {
alert("Row is selected");
});
$("input").click(function(e) {
e.stopImmediatePropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="table"class="table table-hover" data-toggle="table">
<thead>
<tr>
<th>#</th>
<th>Data</th>
<th>User</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>0.52,1.041</td>
<td>Samantha</td>
<td>40%</td>
</tr>
<tr>
<td>2</td>
<td>226,134</td>
<td><input value="Martin"></td>
<td>-20%</td>
</tr>
<tr>
<td>3</td>
<td>0.52/1.561</td>
<td>Damien</td>
<td>26%</td>
</tr>
</tbody>
</table>

On the same note as the answer above by "I wrestled a bear once", you can just get the id of the selected field (considering you do have an id). I added one for demonstration purposes
$(function() {
var $table = $('#table');
$table.on('click', function(e) {
console.log(e.target.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="table"class="table table-hover" data-toggle="table">
<thead>
<tr>
<th>#</th>
<th>Data</th>
<th>User</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>0.52,1.041</td>
<td id="1">Samantha</td>
<td>40%</td>
</tr>
<tr>
<td>2</td>
<td>226,134</td>
<td id="2"><input type="text" id="userInput" value="Martin"></td>
<td>-20%</td>
</tr>
<tr>
<td>3</td>
<td>0.52/1.561</td>
<td id="3">Damien</td>
<td>26%</td>
</tr>
</tbody>
</table>

I'm not sure why you're using an external library for something this simple unless I'm missing something, this should do the trick..
$(function() {
var $table = $('#table');
$table.find("tr").click(function(e){
if('INPUT' === e.target.tagName) return;
var sel = 1==$(this).attr('data-selected');
$(this).attr('data-selected', sel?0:1);
$(this).find('td').css('background-color', sel ? "" : 'green');
console.log(getSelections());
});
function getSelections(){
var vals = [];
$table.find("tr[data-selected='1']").each(function(){
var ele = [];
$(this).find('td').each(function(){ ele.push($(this).text()) })
vals.push(ele);
});
return vals;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="table"class="table table-hover" data-toggle="table">
<thead>
<tr>
<th>#</th>
<th>Data</th>
<th>User</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>0.52,1.041</td>
<td>Samantha</td>
<td>40%</td>
</tr>
<tr>
<td>2</td>
<td>226,134</td>
<td><input value="Martin"></td>
<td>-20%</td>
</tr>
<tr>
<td>3</td>
<td>0.52/1.561</td>
<td>Damien</td>
<td>26%</td>
</tr>
</tbody>
</table>

How to replace a text with row count with javascript

i have a dynamic table . that i'd add number for each tr. how can i replace the hello text with count of each tr with javascript?
here is my snippet of table:
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<th>Hello</th>
<th>A</th>
</tr>
<tr>
<th>Hello</th>
<th>B</th>
</tr>
<tr>
<th>Hello</th>
<th>C</th>
</tr>
</table>
</body>
</html>

you should be using <td> instead of <th> after the header row.
$('tr').each(function(index, row){
$(row).children('td').first().text(index);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<td>Hello</td>
<td>A</td>
</tr>
<tr>
<td>Hello</td>
<td>B</td>
</tr>
<tr>
<td>Hello</td>
<td>C</td>
</tr>
</table>
</body>
</html>

Here is the solution for your problem -
var table = document.querySelector("#myTable");
var rows = table.querySelectorAll("tr");
let index = 0;
for( let row of rows){
for( let col of row.querySelectorAll("th")){
if( col.textContent == 'Hello'){
col.textContent = index;
}
}
index++;
}
<table border="1" id="myTable">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<th>Hello</th>
<th>A</th>
</tr>
<tr>
<th>Hello</th>
<th>B</th>
</tr>
<tr>
<th>Hello</th>
<th>C</th>
</tr>
</table>

You need to get all the <tr> elements within the table. Then loop through the <tr>s and starting with the second one, replace its first child's text with the index of the current <tr>.
let tableRows = document.querySelectorAll("tr")
tableRows.forEach((tr, index) => {
if(index === 0) {
//Do nothing bc you don't want to remove the text in the first table row
} else {
let firstChild = tr.children[0]
firstChild.innerText = index
}
})

You can use find("td:first") to get the numbers that would replace "Hello". Also, since its a table, you need to use td. th are used for headers:
$('tr').each(function(index, row) {
$(row).find("td:first").text(index);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head></head>
<body>
<table border="1">
<tr>
<th>Rownumber</th>
<th>Name</th>
</tr>
<tr>
<td>Hello</td>
<td>A</td>
</tr>
<tr>
<td>Hello</td>
<td>B</td>
</tr>
<tr>
<td>Hello</td>
<td>C</td>
</tr>
</table>
</body>
</html>

Applying the jQuery tablesort and re-numbering line item #'s

I need your help.
While I love this jQuery tablesorter plug-in, its only downfall is that my line numbers because out of sorts upon sorting another column. How would one renumber the line item #'s such that they would be in sequence. For example, if I were to click on the [First Name] column, the table becomes sorted as follows in the image below:
As you can clearly see, my numbers on the left are now out of sorts. How could delete and re-number the line item #'s in their proper sequence starting from (lowest to the highest integer).
Here is the markup in question:
$(document).ready(function() {
$("#myTable").tablesorter();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://my-script-hosting.googlecode.com/files/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
</script>
<table id="myTable" class="style1" border="1" cellspacing="1">
<thead>
<tr style="border-width: 1px; background-color: #C0C0C0">
<th>#</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>2</td>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>3</td>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>4</td>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

After completing sorting it will fire sortEnd event at that time update the numbering
$(document).ready(function() {
$("#myTable").tablesorter().on("sortEnd", function() {
$(this).find("tr:gt(0)").each(function(i) {
$(this).find("td:eq(0)").text(i+1);
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://my-script-hosting.googlecode.com/files/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
</script>
<table id="myTable" class="style1" border="1" cellspacing="1">
<thead>
<tr style="border-width: 1px; background-color: #C0C0C0">
<th>#</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>2</td>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>3</td>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>4</td>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

Use the sortEnd event and add some code to re-number the first column:
$(document).ready(function()
{
$("#myTable").tablesorter().bind("sortEnd",function(e, t){
var table = $(this);
table.find('tbody tr').each(function(i){
var row = $(this);
var firstCell = row.find('td:first-child');
firstCell.text(i+1);
});
});
}
);
Working fiddle: http://jsfiddle.net/gdxjvtkm/

How to delete the last column in an HTML TABLE using by jquery?

I have an 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="deleteLastColumn();" value="do it"/>
I need a javascript/jquery code, which delete the last column (message) in the table:
function deleteLastColumn() {
$("#theadID tr th:not(:last-child)......
$("#tbodyID tr td:not(:last-child)......
}
So the result should be this:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
</tr>
</tbody>
</table>
I know there is the ":not(last)" method, but I can't find any example to my problem.
Could anyone help me?

Try
$('#persons tr').find('th:last-child, td:last-child').remove()
Demo: Fiddle

You can use this solution to achieve it easily..
function myFunction() {
var allRows = document.getElementById('my_table').rows;
for (var i=0; i< allRows.length; i++) {
allRows[i].deleteCell(-1);
}
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="my_table">
<thead >
<th>Column 1</td>
<th>Column 2</td>
<th>Column 3</td>
</thead >
<tr >
<td>Number 1</td>
<td>String 1</td>
<td>Decimal 1</td>
</tr>
<tr >
<td>Number 2</td>
<td>String 2</td>
<td>Decimal 2</td>
</tr>
<tr >
<td>Number 3</td>
<td>String 3</td>
<td>Decimal 3</td>
</tr>
</table><br>
<button onclick="myFunction()">Remove Last Column</button>
</body>
</html>

In addition to Arun P Johny's answer,
That would let you remove last row each time you click the button. If you just want to remove one column, not others you may try this.
function deleteLastColumn() {
$(document).find('.last').remove()
}
after adding class last to the last td and th of the table.
Demo : Fiddle

Categories

Resources