here is my html
<div class="col-md-9">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr style="background-color: white">
<th> <i class="fa fa-male"></i> Name </th>
<th><i class="fa fa-bars"></i> Particular</th>
<th><i class="fa fa-envelope-o"></i>Unit</th>
<th><i class="fa fa-map-marker"></i>Quantity</th>
<th><i class="fa fa-phone"></i>From</th>
<th><i class="fa fa-phone"></i>Date</th>
<th><i class="fa fa-phone"></i>TAKE actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>COMB</td>
<td>fasionable comb</td>
<td>SVP</td>
<td>3</td>
<td>Bindibhatt1</td>
<td>2014-03-22 18:15:34 UTC
</td><td>
<form action="/requisitions/2" class="button_to" method="get"><div><input class="pos" data-confirm="Are you sure?" type="submit" value = "po" ></div></form>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
AND MY jquery
$(window).load(function(){
$(".pos").click(function(e){
debugger;
localStorage.setItem("visited" + $(this).closest("tr").index(), true);
$(this).css("color", "red"); // visited
});
for(var i = 0, len = $(".pos").length; i < len; i++){
if(localStorage.getItem("visited" + i)){
$(".pos:eq(" + i + ")").css("color", "white"); // visited
}else
{
$(".pos:eq(" + i + ")").css("color", "black"); // not visited
}
}
});
I want the button which is clicked to be disabled and the html should be generated from po.
You can disable the button with:
for(var i = 0, len = $("tr.pos").length; i < len; i++) {
if(localStorage.getItem("visited" + i)) {
$("tr.pos").eq(i).css("color", "white").prop('disabled', true).val('generated'); // visited
} else {
$("tr.pos").eq(i).css("color", "black"); // not visited
}
}
You need the more specific selector tr.pos because you also have input.pos in your DOM (you didn't show that in your question).
Related
I have a problem. i would like to display some elements of a table when user click on an span icon using javascript.
I don't find the problem. normally i should click on the icon and display the list of elements associated to the title. i verify and if a display all rows i have the good list by title.
my view is here:
#{
ViewData["Title"] = "CalendrierPFL";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<h1 class="text-center">Calendrier PFL</h1>
<br />
<!--https://www.w3.org/WAI/tutorials/tables/irregular/ Pour faire une table avec ce format-->
<table class="table table-bordered">
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<tr class="text-center">
<td rowspan="2">Zones</td>
<th colspan="2" scope="colgroup">Lundi</th>
<th colspan="2" scope="colgroup">Mardi</th>
<th colspan="2" scope="colgroup">Mercredi</th>
<th colspan="2" scope="colgroup">Jeudi</th>
<th colspan="2" scope="colgroup">Vendredi</th>
<th colspan="2" scope="colgroup">Samedi</th>
<th colspan="2" scope="colgroup">Dimanche</th>
</tr>
<tr>
#for (int i = 0; i < 7; i++)
{
<th scope="col">Matin</th>
<th scope="col">Aprèm</th>
}
</tr>
#for (int j = 0; j < Model.InfosZoneCalendrier.Count(); j++)
{
<tr>
<th scope="row">
#Model.InfosZoneCalendrier[j].NomZone
<span class="fas fa-caret-down" onclick="showEquipements(#Model.InfosZoneCalendrier[j].NomZone)"></span>
</th>
#for (int y = 0; y < Model.InfosZoneCalendrier[j].ListEquipements.Count(); y++)
{
<tr class="hide" style="display:none" id="#Model.InfosZoneCalendrier[j].ListEquipements[y]" name="#Model.InfosZoneCalendrier[j].NomZone" >
<th style="color:gray">#Model.InfosZoneCalendrier[j].ListEquipements[y]</th>
</tr>
}
</tr>
}
</table>
#section Scripts
{
<!-- JS includes -->
<script type="text/javascript">
function showEquipements(parameter) {
var div = document.getElementsByName(parameter);
var i;
for (i = 0; i < div.length; i++) {
if (div[i].style.display == "") {
div[i].style.display = "none";
} else {
div[i].style.display = "";
}
}
}
</script>
}
Thanks in advance for your help :)
Problem resolved if this can interest someone :)
<span class="fas fa-caret-down" onclick="showEquipements(#Model.InfosZoneCalendrier[j].*NomZone*)"></span>
at the place of NomZone i put an integer Id unique to difference each option. It works!
So i made like this:
<span class="fas fa-caret-down" onclick="showEquipements(#Model.ListResasZone[j].IdZone.ToString())"></span>
$("#sel_gram").change(function(){
var gramid = $(this).val();
$.ajax({
url: 'getBooth-details.php',
type: 'post',
data: {gram:gramid},
dataType: 'json',
success:function(response){
var len = response.length;
for( var i = 0; i<len; i++){
var id = response[i]['id'];
var name = response[i]['name'];
var booth_officer_name = response[i]['booth_officer_name'];
var booth_officer_contact = response[i]['booth_officer_contact'];
}
}
});
});
I want to add this to a table that I have designed below the select options.
I am getting all the data properly but I'm unable to use it in my table .
This is the table where i want to show the data.
<table class="table table-hover p-table">
<thead>
<tr>
<th>Booth Name</th>
<th>Booth Adhikari</th>
<th>Contact</th>
<th>Custom</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-name">
<h6 id="boothname">Name</h6>
</td>
<td class="p-team">
<h6 id="adhikariname"></h6>
</td>
<td>
<h6 id="adhikaricontact"></h6>
</td>
<td>
<i class="fa fa-folder"></i> View
<i class="fa fa-pencil"></i> Edit
<i class="fa fa-trash-o"></i> Delete
</td>
</tr>
</tbody>
</table>
This is where i want my data to be displayed.. where on click of view i want to take user to next page with id of the booth show that i can show further details
You can append every row using += in some variable and then use .html() to append same row inside your <tbody> .
Demo Code :
//your response
var response = [{
"id": "1",
"name": "Booth First",
"booth_officer_name": "First Adhikari",
"booth_officer_contact": "9827198271",
"gram_parshad_name": "Gram Officer One",
"gram_parshad_contact": "1231231231",
"gram_population": "10000",
"gram_house_count": "106",
"gram_voters_count": "8922",
"gram_polling_both_count": "20",
"zone_selected": "23",
"sector_selected": "14",
"panchayat_selected": "9",
"gram_selected": "6",
"zone_area": "dongargadh",
"zone_region": "rural"
}];
var len = response.length;
var data = "";
for (var i = 0; i < len; i++) {
//appeding each row inside <tr>
data += '<tr><td class="p-name"><h6 id="boothname">' + response[i]['name'] + '</h6> </td><td class="p-team"> <h6 id="adhikariname">' + response[i]['booth_officer_name'] + '</h6></td> <td><h6 id="adhikaricontact">' + response[i]['booth_officer_contact'] + '</h6></td><td><i class="fa fa-folder"></i> View <i class="fa fa-pencil"></i> Edit <i class="fa fa-trash-o"></i> Delete </td></tr>';
}
//appending data inside table <tbody>
$("#data").html(data)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover p-table" border="1">
<thead>
<tr>
<th>Booth Name</th>
<th>Booth Adhikari</th>
<th>Contact</th>
<th>Custom</th>
</tr>
</thead>
<tbody id="data">
<!--data will come here-->
</tbody>
</table>
In my code i use fnFilter function of Jquery datatable to search the data.
In some cases it search perfectly but in some cases it not.
if i try to search code = "BS" it will search perfectly.
But when i try to search using code = "AL" it will display all records. which is not correct.
This is my code for datatable search option.
$("div.dataTables_filter input").bind('keypress', function (e) {
var searchText = $(this).val().trim();
if (e.which == 13) {
$("#search-error-text").remove();
if (searchText.length > 0) {
var value = searchText;
oTable.fnFilter(value);
$("div.dataTables_filter input").val(searchText);
}
else {
var errorMessage = "Please Enter Data!";
$("div.dataTables_filter input").before("<span id='search-error-text' class='error-text'>" + errorMessage + "</span>");
return;
}
}
else {
return;
}
});
$("div.dataTables_filter #grid-search-button").click(function () {
$("#search-error-text").remove();
var searchText = $("div.dataTables_filter input").val().trim();
if (searchText.length > 0) {
var value = searchText;
oTable.fnFilter(value);
$("div.dataTables_filter input").val(searchText);
}
else {
var errorMessage = "Please Enter Data!";
$("div.dataTables_filter input").before("<span id='search-error-text' class='error-text'>" + errorMessage + "</span>");
return false;
}
});
Html code below table.
<div class="table-responsive">
<table id="datatable-sale" class="datatable">
<thead>
<tr>
<th class="table_heading table-head ">
Code
</th>
<th class="table_heading table-head">
Description
</th>
<th class="table_heading table-head">
Type
</th>
<th class="table_heading table-head cursorDefault">
Edit
</th>
<th class="table_heading table-head cursorDefault">
Status
</th>
<th class="table_heading table-head cursorDefault">
Delete
</th>
</tr>
</thead>
<tbody class="table-head">
#foreach (var item in ViewData["sale"] as IEnumerable<Sales_lut>)
{
<tr>
<td class="table_heading text-left table-head-maintenance Width-10">
#item.code
</td>
<td class="table_heading text-left">
#item.descrip
</td>
<td class="table_heading text-left table-head-maintenance Width-10">
#item.type1
</td>
<td class="table_heading">
<a id="edit_sale" href="#" class=" edit action-button permission-based-access" saleidval="#item.saleid" permission-key="#Permissions.Sale.GetText()" sale-code="#item.code">
<i class="icon-pencil input-icon success" title="Edit">
</i>
</a>
</td>
<td class="table_heading permission-based-access" permission-key="#Permissions.Sale.GetText()">
#if (item.status == 0)
{
<a class="active" href="" title="Change Status" active-id="#item.saleid" sale-code="#item.code" active-code="#item.code">
<img id="active" src="#Url.Content("~/Content/Images/tick.png")" />
</a>
}
else
{
<a class="in-active" href="" title="Change Status" in-active-id="#item.saleid" sale-code="#item.code" in-active-code="#item.code">
<img id="in-active" src="#Url.Content("~/Content/Images/bullet_cross.png")" />
</a>
}
</td>
<td class="table_heading">
<a id="delete_sale" class=" deletesale delete permission-based-access" permission-key="#Permissions.Sale.GetText()" href="#" sale-code="#item.code">
<i class="icon-trash" title="delete">
</i>
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
Attach screenshot display an actual issue.Code "FZ" and "AM" does not contain any word as "AL" then also it display this records. and this happen for multiple search options. I need to apply search for whole data so i can't use single column search option.I just find out one issue that it search alternate rows means it search only odd rows in the grid. Any solution for it ???
I'm currently try to make a collapsible category list using html table tag and jquery.
This is my jquery :
(function() {
var toggle = $('span.toggle');
toggle.on('click', function() {
var $this = $(this);
var objectClass = $this.parent().parent().attr('class');
toggleRow($this, objectClass);
});
function toggleRow(element, elClass) {
var classes = elClass.split(' ');
var textList = '';
for (var i = 0; i < classes.length; i++) {
if (classes[i].length > 0) {
textList += "."+classes[i];
}
}
var $this = element.parents(textList);
var lastRow = $this.index() == $('tr' + textList).last().index() ? true : false;
if($this.attr('data-collapse') !== 'collapsed') {
if(!lastRow) {
$this.attr('data-collapse', 'collapsed').nextUntil('tr' + textList).hide();
} else {
$this.attr('data-collapse', 'collapsed').nextUntil('tr.has-children').hide();
}
} else {
if(!lastRow) {
$this.attr('data-collapse', '').nextUntil('tr' + textList).show();
} else {
$this.attr('data-collapse', '').nextUntil('tr.has-children').show();
}
}
}
}());
this is my HTML :
<table class="table table-bordered" id="MainMenu">
<thead>
<tr>
<th width="50">No</th>
<th>Category Name</th>
</tr>
</thead>
<tbody>
<tr class="parent-row has-children" data-collapse="">
<td>1</td>
<td>
<span class="toggle"><i class="fa fa-fw fa-caret-down"></i></span>Dog
</td>
</tr>
<tr class="child-row" data-collapse="">
<td>2</td>
<td>
<span class="toggle"><i class="fa fa-fw fa-caret-down"></i></span>Foods and Treats
</td>
</tr>
<tr class="child-child-row">
<td>3</td>
<td>
Dry Food
</td>
</tr>
<tr class="parent-row has-children" data-collapse="">
<td>1</td>
<td>
<span class="toggle"><i class="fa fa-fw fa-caret-down"></i></span>Dog
</td>
</tr>
<tr class="child-row" data-collapse="">
<td>2</td>
<td>
<span class="toggle"><i class="fa fa-fw fa-caret-down"></i></span>Foods and Treats
</td>
</tr>
<tr class="child-child-row">
<td>3</td>
<td>
Dry Food
</td>
</tr>
</tbody>
</table>
Now the problem is when i click tr tag with "child-row" class, the jquery collapse UNTIL THE NEXT tr tag WITH "child-row" CLASS !
so if there is tr tag with "parent-row" class between 2 tr tag with class "child-row", its also closed.
I found the problem in my Jquery but i cannot fixed it, it was in this row :
var lastRow = $this.index() == $('tr' + textList).last().index() ? true : false;
it will always return false, except for the LAST tr tag WITH CLASS "child-row" in the table
I know my explanation is kinda blur, i make a fiddle here :
JsFiddle
but i'm also kinda new to JsFiddle, i even cannot make my code work there.
So, i someone knew how to fix this code, please reply. Thanks.
I have a json data through ajax call and displayed it in a dynamic html table based on the length of data object obtained from ajax using jscript. Now i need to hide or show data in the table on the basis of a drop down option selected, for example if the user clicks on an item "less than 100" from the drop down, only the related rows which has values less than 100 should be displayed and other rows should be hidden.
$.ajax({
url: "http://finance.google.com/finance/info?client=ig&q=" +CompName+ "",
type: "get",
dataType: "jsonp",
success:function(data, textstatus, jqXHR){
drawTable(data);
}
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData){
var row= $("<tr />")
$("#table").append(row);
row.append($("<td>" + rowData.t + "</td>"));
row.append($("<td>" + rowData.l_cur + "</td>"));
row.append($("<td>" + rowData.c + "</td>"));
row.append($("<td>" + rowData.lt + "</td>"));
}
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select the value
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Below 100</li>
<li>100-300</li>
<li>300-600</li>
<li>600-1000</li>
<li>above 1000</li>
</ul>
</div>
<div class="table-responsive">
<table id="table" class="table table-striped">
<tr>
<th>Name</th>
<th>Price</th>
<th>Change</th>
<th>Date</th>
</tr>
</table>
</div>
Here's the html AND javascript snippet.
In order to make it work correctly, apart from the text for li, you should also make use of data-attributes which would give you the range to lookup.
Following is an example which shows how you can make use of it.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select the value
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Below 100</li>
<li>100-300</li>
</ul>
</div>
<div class="table-responsive">
<table id="table" class="table table-striped">
<tr>
<th>Name</th>
<th>Price</th>
<th>Change</th>
<th>Date</th>
</tr>
<tr>
<td>ABC</td>
<td>99</td>
<td>+10</td>
<td>12/12/2014</td>
</tr>
<tr>
<td>EFG</td>
<td>79</td>
<td>+10</td>
<td>12/12/2014</td>
</tr>
<tr>
<td>HIJ</td>
<td>104</td>
<td>+20</td>
<td>12/12/2014</td>
</tr>
</table>
</div>
<script>
$('li').on("click",function()
{
var minRange = $(this).find('a').data("min"); // get the data-min attribute to get the min range
var maxRange = $(this).find('a').data("max"); // get the data-min attribute to get the max range
$("#table tr").each(function() // iterate through each tr inside the table
{
var data = $(this).find('td').eq(1).text(); // get the price td column value from each tr
if(!isNaN(data) && data != "") // skip th tags inside tr and any other td missing the price column value
{
$(this).hide(); // hide all tr by default
if(data >= minRange && data <= maxRange) // check if the price td column value falls within the range
$(this).show(); // show the current tr
}
});
});
</script>
Example : http://jsfiddle.net/RxguB/205/
We listen for changes on the select event. We then get the criteria we are using to filter records by getting the value of the selected item. We create multiple filters based on the value. We're going to toggle between showing and hiding them.
$("select").on("change", function() {
var criteria = ($(":selected").prop("value"));
var filterOne = $("td:nth-child(2)").filter(function() {
return Number($(this).html()) >= 100;
});
var filterTwo = $("td:nth-child(2)").filter(function() {
return Number($(this).html()) < 100;
});
if (criteria == "Less than 100") {
filterOne.parent().hide();
filterTwo.parent().show();
}
else {
filterTwo.parent().hide();
filterOne.parent().show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>Less than 100</option>
<option>More than 100</option>
</select>
<table>
<tr>
<th>Name</th>
<th>Price</th>
<th>Change</th>
<th>Date</th>
</tr>
<tr>
<td>Stock 1</td>
<td>72</td>
<td>+5</td>
<td>3/4/2012</td>
</tr>
<tr>
<td>Stock 2</td>
<td>102</td>
<td>+8</td>
<td>5/7/2013</td>
</tr>
<tr>
<td>Stock 3</td>
<td>90</td>
<td>-3</td>
<td>3/16/2013
</tr>
</table>