I have an html table shown below:
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectall" /></th>
<th colspan="2">Status</th>
<th class="data-name">UserName</th>
<th class="data-name">Description</th>
</thead>
</table>
The Status uses a text to indicate active and inactive users. Here I'm trying to display an error msg if anyone tries to delete the checkbox that has status as 'active'. Only 'inactive' users can be deleted.
I'm looking for a jquery code for that. can someone help me?
I'm providing a sudo code of what i'm trying to achieve. this might not be syntactically correct.
if $('#selectall input[type="checkbox"]:checked') is 'active'
{
alert('do not delete the checkbox');
}
else
{
alert('delete the checkbox');
}
this might do it
if ($('#selectall input[type="checkbox"]:checked').size() > 0)
{
alert('do not delete the checkbox');
}
else
{
alert('delete the checkbox');
}
i developed his next code in javascript and html
http://jsfiddle.net/jHpKB/1/
I hope you help
(My english is bad sorry)
html
<table>
<thead>
<tr>
<th><input type="checkbox" id="selectall" /></th>
<th colspan="2">Status</th>
<th class="data-name">UserName</th>
<th class="data-name">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" data-user-id="1" data-status="active" /></td>
<td>Active</td>
<td>User 1</td>
<td>None</td>
</tr>
<tr>
<td><input type="checkbox" data-user-id="1" data-status="inactive" /></td>
<td>Inactive</td>
<td>User 1</td>
<td>None</td>
</tr>
</tbody>
</table>
Javascript
$(document).ready(function(){
$("#selectall").on("click", function(){
var checked = $(this).is(":checked");
$("input[type='checkbox'][data-status='inactive']").attr("checked", checked )
});
});
Related
I'm having a trouble why it keeps telling the console bad request after I check all the data, but if I manually check each item on table it works fine, but when I use check all - bad request I think the problem it has "on" data on my table. Is there any expert can know about this?Im begginner of django and javascript please suggest if anyone know about this thanks in advance
Bad Request using check all
Check manually
table.html
<button type="submit" id="delete_btn" class="btn btn-secondary round btn-min-width mr-1 mb-1" >Mark
as Paid</button>
<table class="table" name="table" id="table">
<thead>
<tr >
<th >No</th>
<th><input type="checkbox" onClick="toggle(this)" /></th>
<th>ID Number</th>
<th >Name</th>
<th >Barangay</th>
<th >Sex</th>
<th >Sector</th>
<th Amount</th>
<th >Signature/Thumb Marks</th>
<th >ID Presented/ Date & Issuance</th>
<th>Date Received</th>
<th >Remarks</th>
</tr>
</thead>
<tbody class="report-content">
{% csrf_token %}
{% for user_information in benefeciaries %}
<tr id="{{user_information.id}}">
<td></td>
<td><input type="checkbox" name="product_id[]" value="{{user_information.id}}"
id="delete_product"></td>
<td>{{user_information.covid_id}} </td>
<td>{{user_information.lastname}}, {{user_information.firstname}}
{{user_information.middle}}</td>
<td width="5%">{{user_information.barangay}}</td>
<td></td>
<td ></td>
<td>{{user_information.amount|floatformat:2|intcomma}}</td>
<td></td>
<td ></td>
<td ></td>
<td></td>
</tr>
{% endfor %}
</tbody>
</table>
javascript
//js checkall
function toggle(source) {
checkboxes = document.getElementsByName('product_id[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
//js mark as paid button
$(document).ready(function(){
$('#delete_btn').click(function(){
if(confirm("Are you sure ?")){
var id =[];
var csrf=$('input[name=csrfmiddlewaretoken]').val();
$(':checkbox:checked').each(function(i){
id[i]=$(this).val()
})
if(id.length===0){
alert("please select item ")
}
else{
console.log(id)
$.ajax({
url:"/delete/",
method:"POST",
data: {
id,
csrfmiddlewaretoken:csrf
},
success:function(response){
Swal.fire({title:"Successfully saved!",text:"Mark As Paid",type:"success",confirmButtonClass:"btn btn-success",buttonsStyling:!1})
}
})
}
}
})
});
views.py ajax
def delete(request):
if request.method=="POST":
product_ids=request.POST.getlist('id[]')
for id in product_ids:
Person.objects.filter(pk=id).update(paid=1)
return redirect('dashboard')
I want to export data from firebase and show the data on web page.
The table should updtae but unfortantly the table can't create new rows.
the code is example for two childs and the image show how the page looks right now.
the html code:
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Board</th>
<th scope="col">Image</th>
<th scope="col">Notes</th>
<th scope="col">Yes</th>
<th scope="col">No</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><a id="board1"></a></td>
<td><a id="image1"></a></td>
<td></td>
<td><input type="checkbox" name="firstYes" /></td>
<td><input type="checkbox" name="firstNo" /></td>
</tr>
<tr>
<th scope="row">2</th>
<td><a id="board2"></a></td>
<td><a id="image2"></a></td>
<td></td>
<td><input type="checkbox" name="secYes" /></td>
<td><input type="checkbox" name="secNo" /></td>
</tr>
the js code:
function doFunction(){
var ref = firebase.database().ref();
ref.on("value", function(snapshot) {
board=snapshot.child("1").child("Board").val();
imageChild=snapshot.child("1").child("Image").val();
document.getElementById("board1").innerHTML = board;
document.getElementById("image1").innerHTML = imageChild;
})
}
function doFunctionSec(){
var ref = firebase.database().ref();
ref.on("value", function(snapshot){
boardsec=snapshot.child("2").child("Board").val();
imageChildsec=snapshot.child("2").child("Image").val();
document.getElementById("board2").innerHTML = boardsec;
document.getElementById("image2").innerHTML = imageChildsec;
})
}
I have the table design in the following manner:
<tr>
<th rowspan="6" scope="row">Payment History: <br><em>(Up to 25 months)</em></th>
<td colspan="3">
<table id="paymentHistory" cellspacing="1" summary="Payment History" class="table table-sm table-bordered" >
<thead class="thead-default">
<tr>
<th style="white-space: nowrap;"></th>
<th style="white-space: nowrap;">Jan</th>
<th style="white-space: nowrap;">Feb</th>
<th style="white-space: nowrap;">Mar</th>
<th style="white-space: nowrap;">Apr</th>
<th style="white-space: nowrap;">May</th>
<th style="white-space: nowrap;">Jun</th>
<th style="white-space: nowrap;">Jul</th>
<th style="white-space: nowrap;">Aug</th>
<th style="white-space: nowrap;">Sept</th>
<th style="white-space: nowrap;">Oct</th>
<th style="white-space: nowrap;">Nov</th>
<th style="white-space: nowrap;">Dec</th>
</tr>
{{#each PaymentProfile}}
<tr>
<th rowspan="2">{{#key}}</th>
</tr>
<!--<tr>-->
<!--{{#each this}}-->
<!--<th style="white-space: nowrap;">{{months #key}}</th>-->
<!--{{/each}}-->
<!--</tr>-->
<tr>
{{#each this}}
<td style="height: 42px;">{{hideEmptyData this}}</td>
{{/each}}
</tr>
{{/each}}
</thead>
</table>
</td>
</tr>
I have some cells which are empty for certain rows. The JSON from which I am rendering has some empty fields/elements, due to which they are not displaying on the table. I want to hide those cells which are empty.
Do I have to write a registerHelper or jquery function? How would I do that?
$("#paymentHistory > tbody > tr").each(function() {
console.log("inside table");
$td=$(this).find('td');
if($td.text() === ''){
$(this).css("display", "none");
}
// $(this).parent().hide();
});
I am trying above code. But i am not able to enter into the function itself.
I am not able to print "inside table" in console.
Can someone suggest me what i am doing wrong ?
So what I want to do is to hide the table cells which are empty. For example, in the year 2014, elements for all of the months are empty, so I don't want to display the row of 2014; and in 2015 only elements for JAN to AUG should be displayed because the others are empty.
JSON Data is as follows:
"PaymentProfile":{
"2015":{
"1":"9",
"2":"-",
"3":"-",
"4":"-",
"5":"-",
"6":"9",
"7":"9",
"8":"B",
"9":" ",
"10":" ",
"11":" ",
"12":" "
},
"2014":{
"1":" ",
"2":" ",
"3":" ",
"4":" ",
"5":" ",
"6":" ",
"7":" ",
"8":" ",
"9":" ",
"10":" ",
"11":" ",
"12":" "
}
},
Can someone help me out?
Output of the above code
Solved the above problem using following code:
Hope it helps someone.
$('#paymentHistory tbody tr').each(function(){
var tr = $(this);
var tdNumber = tr.find('td').length;
var counter = 0;
tr.find('td').each(function () {
if ( $(this).text().trim() == '' ) counter++;
});
if ( counter == tdNumber ) tr.hide();
});
First of all, do not add inline style: height: 42px on your table cell. <td> has no height by default, so if you put no content inside, it will have height:0. Now, the <tr> is the same - it does have height: 0 by default and gets height of its children, which means that if there aren't any, it will not be visible due to the default height property.
Look at the example:
<table>
<thead>
<th>Row</th>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
<th>C5</th>
</thead>
<tbody>
<tr>
<td>1st row</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>2nd row</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4th row</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
The third row is there in the HTML code, but it is not visible by default, as it's empty. So all you need to do is to remove the default inline styles to achieve this effect. If you want to add the height: 42px for the table cell, consider using CSS (but not inline - use <style> tag in the <head> of your file or <link> it from an external .css stylesheet):
td:not(:empty) {
height: 42px;
}
Ref: :not, :empty
My original javascript was:
$(document).ready(function(){
$("th :checkbox").change(function() {
$(this).closest("table").find(":checkbox").prop("checked", $(this).is(":checked"));
});
});
which was used on a setting like this:
<div>
<table id="table" width="100%">
<tr>
<th><input type="checkbox" />Select All</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
</div>
I slightly changed how my tables were and it now goes something like:
<table>
<tr>
<th><input type="checkbox" />select all</th>
</tr>
</table>
<table>
<tr>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
</tr>
</table>
What do I need to change in my javascript so that when the checkbox in <th> is checked, all the checkboxes inside the <td>'s in the next table are checked?
Thanks.
Related to this post.
Add .next() to .closest("table"):
$(document).ready(function(){
$("th :checkbox").change(function() {
$(this).closest("table").next().find(":checkbox").prop("checked", $(this).is(":checked"));
});
});
$(this).closest("table") selects the table of the element matching th :checkbox. next() selects the next element, which is another table, in this case.
This code can break easily. I suggest to set an ID to the other table, and use the following code:
$(document).ready(function(){
$("th :checkbox").change(function() {
$("#id-of-table :checkbox").prop("checked", $(this).is(":checked"));
});
});
I am following the post:
http://mosesofegypt.net/post/GridView-with-Select-All-CheckBox-using-JQuery.aspx
to create a checkbox column in asp.net gridview with select/deselect all functionality.
In my case, the gridview and the javascript (JQuery) code lies inside a dynamically load usercontrol, and there are more than one instances of that user control. The select/deselect functionality works only in the last usercontrol created on page.
In other words, the gvProducts.ClientId in the js script knows only about the last gridview.
Any ideas how can I get reference to the ClientIds of gridview inside other usercontrol (i.e. other than the last) ?
Any help would be most appreciated.
EDIT : This question is essentially the same as asked in this post : Multiple user control instances and ClientID in JS
but there are no helping answers for it.
Thanks,
Ali
You could add a CssClass to the GridView and base your jQuery selector off of that.
Script:
<script type="text/javascript">
$(function () {
$(".t th input:checkbox").click(function () {
var $checkbox = $(this).closest('table').find(':checkbox:not(:first)');
$checkbox.attr('checked', $(this).attr('checked'));
});
});
</script>
2 tables with the same class name:
<table class="t">
<tr>
<th align="left" scope="col">Category</th>
<th align="left" scope="col">Product</th>
<th align="right" scope="col">Unit Price</th>
<th align="left" scope="col">Supplier</th>
<th scope="col">
<input type="checkbox" name="select-all" />
</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
</table>
<br /><br /><br />
<table class="t">
<tr>
<th align="left" scope="col">Category</th>
<th align="left" scope="col">Product</th>
<th align="right" scope="col">Unit Price</th>
<th align="left" scope="col">Supplier</th>
<th scope="col">
<input type="checkbox" name="select-all" />
</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
</table>