So i got this table
<table id="table" class="table table-bordered table-hover">
<thead>
<tr>
<th data-field="id" class="hidden">ID</th>
<th data-field="variant">Variant</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
it will be filled with data trough
$('#table').bootstrapTable({
data: returnValue
});
then i can click the rows which will add the class .bg-info to it and i want to check if a row has the class and then save the row data in a var
this was my attempt:
var item = $.map(table.rows('.bg-info').data(), function (item) {
return item[0]
});
but table.rows can't be used as a method apparently
If you want to select all the rows with the class bg-info in your table. Use a jQuery selector based on that class :
var bgInfoRows = $("#table tbody .bg-info");
You will have every item in tbody that has the class bg-info.
Related
I have a problem on the onclick function of table b the function does not determine if table A has a class of selected_upsize or not
Scenario:
Table B has a list of item and also in table A.
now when I click one of the items in Table B, the on click function will do the condition if table A has a class of selected_upsize or not, To make the scenario short.
if the table A has a class of (selected_upsize) then it will alert something, else the item of that I clicked in table B will append on table A.
I have here my output
I have here my function to my Onclick function
$(".customer_edit_table_chaining_condiments").on('click',function(e){
//this is the item of table B that will append if the table A has no class
var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();
$(".customer_edit_table_chaining_condiments").on('click',function(e){
//this is the item of table B that will append if the table A has no class
var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();
if($('#noun_chaining_order').find('tr.selected_upsize').length){
alert('You can"t upsize the item');
}else{
$('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
$('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');
}
})
My Html Table A
<table class="table table-hover upsize_check" id="noun_chaining_order" style="border:none;">
<thead>
<tr style="font-size: 15px; color:white;">
<th scope="col">Qty</th>
<th scope="col">Condiments</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody style="font-size:14px; color:white;" class="tbody_noun_chaining_order">
</tbody>
Table B
<table class="table table-striped table-bordered " id="customer_table_update_chain_order" style="width:100%">
<div class="content-noun" style="text-align: center;">
<thead>
<tr style="background: linear-gradient(-20deg, #00e4d0, #5983e8); color:white;" >
<th>Condiment Screen Name</th>
<th>Condiment Price</th>
<th>Condiment Image</th>
</tr>
</thead>
</div>
<tbody>
</tbody>
$(".customer_edit_table_chaining_condiments").on('click',function(e){
//this is the item of table B that will append if the table A has no class
var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();
//here will check if table A has selected upsize or not
//THE BELOw LINE WILL RETURN ALL THE ELEMENTS WITH SELECTED_UPSIZE CLASS IF WE HAVE .SELECTED_UPSIZE IN THE FIND METHOD, THUS THE BELOW LINE WILL ALWAYS BE TRUE
$('table#noun_chaining_order').find('.upsize_check').each(function(){
//INSTEAD IF YOU SEARCH FOR THE ELEMENTS WITH A DIFFERENT CLASS as in the above line of code, THAT MIGHT OR MIGHT NOT HAVE THE SELECTED_UPSIZE CLASS WITH IT, THEREFORE MAKING THE BELOW STATEMENTS LEGAL
if ($(this).hasClass('selected_upsize')) {
alert('You can"t upsize the item');
}
else
{
$('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
$('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');
}
});
});
ADDING THE SOLUTION BELOW....
HTML
<table class="table table-hover" id="noun_chaining_order" style="border:none;">
<thead>
<tr style="font-size: 15px; color:white;">
<th scope="col">Qty</th>
<th scope="col">Condiments</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody style="font-size:14px; color:white;" class="tbody_noun_chaining_order">
</tbody>
<table class="table table-striped table-bordered " id="customer_table_update_chain_order" style="width:100%">
<div class="content-noun" style="text-align: center;">
<thead>
<tr style="background: linear-gradient(-20deg, #00e4d0, #5983e8); color:white;" >
<th>Condiment Screen Name</th>
<th>Condiment Price</th>
<th>Condiment Image</th>
</tr>
</thead>
</div>
<tbody>
</tbody>
JAVASCRIPT
$("#customer_table_update_chain_order tbody tr").on('click',function(e){
//this is the item of table B that will append if the table A has no class
var customer_edit_condimentsScreenNameClicked = $(this).find('.customer_edit_condimentsScreenNameClicked').text();
var customer_edit_condimentsScreenPriced = $(this).find('.customer_edit_condimentsScreenPriced').text();
//here will check if table A has selected upsize or not
$('table#noun_chaining_order tbody tr').each(function(){
if ($(this).hasClass('selected_upsize')) {
sameRow = true;
}
else
{
sameRow =false;
$('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
$('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');
}
});
if(sameRow){
alert('You can"t upsize the item');
}
});
Please try this.
If my understanding is correct this should work.
$(".customer_edit_table_chaining_condiments").on('click',function(e){
//this is the item of table B that will append if the table A has no class
var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();
if($('#noun_chaining_order').find('tr.selected_upsize').length){
alert('You can"t upsize the item');
}else{
$('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
$('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');
}
})
I have a script that was working to parse a table to json.
It worked fine like this
<thead id="itemspecthead" class="itemspectheadc">
<tr>
<th class="ishead isheadname">Name</th>
<th class="ishead isheadvalue">Value</th>
</tr>
</thead>
With the script logic:
var headers = [];
$(rows.shift()).find('th:first:not(:empty), th:nth-child(2):not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
But trying to stylize my table, I added a couple other rows to my table header.
<thead id="itemspecthead" class="itemspectheadc">
<tr><td colspan="2" class="tdheader"><span>Item Specifics:</span></td></tr>
<tr><td colspan="2" class="speccaption"><span>(Generated from Unique Values from All Listings)</span><br /></td></tr>
<tr>
<th class="ishead isheadname">Name</th>
<th class="ishead isheadvalue">Value</th>
</tr>
</thead>
If I remove the two extra rows in my thead, the script works fine.
It seems the error is in this logic .find('th:first:not(:empty), th:nth-child(2):not(:empty)')
I've tried changing it to .find('th.ishead:first:not(:empty), and .find('.ishead th:first:not(:empty), to find it via classname with no luck.
How can I target my ishead th rows while keeping the extra colspan="2" rows in my thead?
Here's my onclick function that is now returning name,value,name,value (duplicating it twice for some reason..). This is literally my entire on click function script, I removed everything else.
$(document).on('click', '#editjson', function() {
var headers = [];
$('th.ishead:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
alert('headers: ' + headers);
console.log(headers);
});
returns name,value,name,value...
Apply :not(:empty) directly to all th (not on any particular-one)
Do like below:-
$(rows.shift()).find('th.ishead:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
Working sample:-
$(document).ready(function(){
var headers = [];
$('th.ishead:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
console.log(headers);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead id="itemspecthead" class="itemspectheadc">
<tr><td colspan="2" class="tdheader"><span>Item Specifics:</span></td></tr>
<tr><td colspan="2" class="speccaption"><span>(Generated from Unique Values from All Listings)</span><br /></td></tr>
<tr>
<th class="ishead isheadname">Name</th>
<th class="ishead isheadvalue">Value</th>
</tr>
</thead>
</table>
So I want to add a class to my table rows except the header but I can't figure out how to do it. Does somebody know how i can do this?
this is my table:
<table id="table" class="hidden table table-bordered table-striped table-hover">
<thead>
<tr>
<th data-field="variant">Variant</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
and this is currently where i add the data and want to add the classes to the rows
$('#table').bootstrapTable({
data: returnValue
});
look at the bootstrap table documentation and use the row style properties,
I'm not familiar with that plugin but I guess it should be something like this
$('#table').bootstrapTable({
data: returnValue,
rowStyle : function(row, index) {
return {
classes: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"}
};
}
});
read the docs here http://bootstrap-table.wenzhixin.net.cn/documentation/
1st : add tbody tag in html table
2nd : simple add the class for you tbody tr only like this
$('#table tbody tr').addClass("newclass");
HTML :
<table id="table" class="hidden table table-bordered table-striped table-hover">
<thead>
<tr>
<th data-field="variant">Variant</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody> //tbody added here
<tr>
....
</tr>
</tbody>
</table>
In jquery
$('#table tbody tr').addClass("newclass");
I'm currently trying to fill dynamically a table with content retrieved from a JSON Object.
Here is the table:
<table id="datatable_tabletools" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">ID</th>
<th data-class="expand">Nom</th>
<th data-hide="phone">Commentaires</th>
<th data-hide="phone,tablet">Date</th>
<th data-hide="phone,tablet">Attachements</th>
<th data-hide="phone,tablet">Actions</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
I have multiple interesting features in the table such as a search option, a filter, sort, export as PDF, etc,....those features are working properly if I'm including static content such as:
<tr>
<td>33</td>
<td>Bevis</td>
<td>1-955-717-0835</td>
<td>Est Ac Inc.</td>
<td>7424</td>
<td>Ichtegem</td>
</tr>
but as soon as I retrieve data table content from My JSON object, I'm not able to use those features anymore, sort doesn't work, search neither.
Here is the JavaScript I'm using:
$(document).ready(function() {
$.get('getAllDocuments', function(responseJson) {
if (responseJson != null) {
var table1 = $("#table");
$.each(responseJson, function(key, value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['id']);
rowNew.children().eq(1).text(value['nom']);
rowNew.children().eq(2).text(value['commentaire']);
rowNew.children().eq(3).text(value['date']);
rowNew.children().eq(4).text(value['id']);
rowNew.children().eq(5).html("Voir Supprimer");
rowNew.appendTo(table1);
});
}
});
});
My table is filled correctly, but not all the functions associated. any idea on how I can fill my table with JSON content in a proper way?
I think you can use ajax option of DataTables like:
var table = $('#example').DataTable( {
ajax: 'data.json'
});
P.S. here is the documentation
I'm new to Javascript and I'm having trouble to get the value from a <td>.
Here is some code to illustrate the problem:
<div id="lista_ativo">
<table class="tabela-basica" width="100%" cellpadding="0px" cellspacing="0px">
<thead>
<tr>
<th width="35px">ID</th>
<th width="200px">Cliente</th>
<th width="200px">Nome</th>
<th width="35px">OAB</th>
<th width="50px">Estado</th>
</tr>
</thead>
<tbody>
<tr class="{classe_row}">
<td data-id="{andamentos_ativos.clienteid}">{andamentos_ativos.clienteid}</td>
<td>{andamentos_ativos.cliente}</td>
<td>{andamentos_ativos.nome}</td>
<td>{andamentos_ativos.oab} / {andamentos_ativos.oab_uf}</td>
<td>{andamentos_ativos.estados}</td>
</tr>
</tbody>
</table>
</div>
My Javascript:
$("#lista_ativo").delegate("tr", "click", function() {
var idbcorporativo = $(this).attr("data-id");
console.log(idbcorporativo);
});
I need the data-id from the first <td>.
You need to go from the tr to the th.
And then reference to the first child beginning by 0.
var idbcorporativo = $(this).children()[0].attr("data-id");
you can try using getAttribute
document.getElementsByTagName("td")[0].getAttribute("data-id");
or with jQuery you can modify your code to
$("#lista_ativo").delegate("tbody tr", "click", function() {
var idbcorporativo = $(this).children().attr("data-id");
console.log(idbcorporativo);
});
here's the example fiddle