We Keep Coding

How to not allow deleting all rows in table?

I have a simple table with 3 columns with classes = "code","description","delete" the column has class "delete" is a checkbox type, and one button with class="savebtn".
I need the following :
When user click save :
the Jquery must verify the code column that it has data.
If any cell in delete column is checked, Delete that row.
If the user checked all cells in delete column alert message that the table must has at least one row , and don't delete the rows.
this is a Demo but it not working with me.
that what i tried :
$(document).ready(function (){
$(".savebtn").bind("click", function(e){
$('.savebtn').attr('disabled',true);
$('.table tbody tr').each(function () {
$(this).find('.code input').each(function () {
if ($(this).closest("tr").find(".delete input").is(":checked") && $('.cf-table-block tbody tr').length >=1){
$('.delete input :checkbox:checked').closest('tr').remove();
$('.savebtn').removeAttr('disabled');
}else if($(this).closest("tr").find(".delete input").is(":checked") && $('.cf-table-block tbody tr').length <2){
e.preventDefault();
}else if($('.delete input').prop('checked')==false && ( $(this).val().length>0)){
$('.savebtn').removeAttr('disabled');
}else if ($('.delete input').prop('checked')==false && ( $(this).val().length==0)){
$(this).attr("placeholder", "Please fill this field");
}
});
});
});
});

First, you should look at wrapping your table header in <thead> and body in <tbody>. This will allow you to determine how many rows are relevant to our needs.
It'd be good to then create an array of rows that are checked to be deleted, this can then be compared (via length) to the original amount of rows.
Here's an example - I've removed a lot of the logic as the use of an array to store checked rows will help remove the need for a lot of those conditionals.
Here's a fiddle.
Edit: Here's a new fiddle in which i've added a button for you to clear/populate the last rows value so you can test.

This is updated fiddle of what you are trying to do.
https://jsfiddle.net/ko55Lbt3/6/
$(document).ready(function (){
$(".savebtn").bind("click", function(e){
$('.savebtn').attr('disabled',true);
if($(".table tr [type='checkbox']:checked").length >= $('.table tr').length -1)
{
alert("all rows can not be deleted");
return false;
}
$('.table tr').each(function () {
$(this).find('.code input').each(function () {
if ($(this).closest("tr").find(".delete input").is(":checked")){
if($(this).val().length > 0)
{
$(this).closest("tr").remove();
$('.savebtn').removeAttr('disabled');
}
else
{
$(this).attr("placeholder", "Please fill this field");
}
}
});
});
});
});
There are few problem with selectors in your current code which i have corrected.For example "tbody" element is no where, the td should not have the type attribute.

I've done it with a simple count on each click:
See in Fiddle
$(document).ready(function (){
// on click "Save"
$(".savebtn").bind("click", function(e){
$('.savebtn').attr('disabled',true);
// Delete rows
$("input:checkbox").each(function () {
if($(this).prop("checked")){
$(this).closest("tr").remove();
}
});
});
// on click a checkbox
$("input:checkbox").on("click", function(){
checkboxCount=0;
$("input:checkbox").each(function(){
checkboxCount++;
});
$("input:checkbox").each(function(){
if($(this).prop("checked")){
checkboxCount--;
}
});
// this is just to see the value in jsFiddle
$("#console").html(checkboxCount);
// If there is no checkbox unchecked, disables the Save button and alert.
if(checkboxCount<1){
alert("Table must have at least one row!");
$('.savebtn').attr('disabled',true);
}else{
$('.savebtn').attr('disabled',false);
}
});
});

Try this one:
https://jsfiddle.net/ersamrow/f7ce7dpj/
HTML:
<table class="table" style="width:100%" border="1">
<thead>
<tr>
<th class="code">Code</th>
<th class="description">Description</th>
<th class="delete">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td class="code" type="text">1</td>
<td type="text">aa</td>
<td class="delete">
<input type="checkbox">
</td>
</tr>
<tr>
<td class="code" type="text">2</td>
<td type="text">bb</td>
<td class="delete">
<input type="checkbox">
</td>
</tr>
<tr>
<td class="code" type="text">3</td>
<td type="text">cc</td>
<td class="delete">
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
<br>
<input class="savebtn" style="width: 65px; font-size: 16px;" type="button" value="Save">
Script:
$(document).ready(function() {
// on click "Save"
$(".savebtn").bind("click", function(e) {
$('.savebtn').attr('disabled', true);
var table_rows = $('table tbody').find('tr').length;
var checked = $('input:checkbox:checked').length;
if (checked < table_rows) {
// Delete rows
$("input:checkbox").each(function() {
if ($(this).prop("checked")) {
$(this).closest("tr").remove();
}
});
} else {
alert("Table must have at least one row!");
}
$('.savebtn').attr('disabled', false);
});
});

Foreach table row find specific control by ID and its value

I'm trying to write a function in jQuery which is going through all table rows and searches for hidden field values by specific hidden control ID "hdnIsEmpty", the problem is that I don't know how to do it by this hidden control ID because there are other hidden controls which are not necessarily to touch...
Maybe there is some other way to get what I wan't, but here is my unsuccessful try/approach and the only one I know:
<udc:Repeater ID="repDetailedInformation" runat="server" DataSource='<%# Eval("DetailsInformation") %>'>
<table id="tblDetails">
<tbody>
<tr>
<td>
BLA-BLA-BLA Information
</td>
</tr>
<tr>
<td>
<udc:HiddenField ID="hdnIsEmpty" runat="server" Value='<%#Eval("IsEmpty") %>' />
</td>
</tr>
<tr>
<td>
<udc:HiddenField ID="hdnBlaBla" runat="server" Value='<%#Eval("BlaBla") %>' />
</td>
</tr>
<tr>
<td>
BLA-BLA-BLA Information
</td>
</tr>
</tbody>
</table>
and jQuery:
<script type="text/javascript">
$(document).ready(function () {
function getHiddenBoolean(name) {
var selector = 'input:hidden[name$="' + name + '"]';
var field = $(selector);
return (field != null && field.length > 0) ? field.val().toLowerCase() == "true" : false;
};
var filteredRows = $('#tblDetails tr td').filter(function () {
return $(this).find('#hdnIsEmpty');
});
$.each(filteredRows, function () {
var isEmpty = getHiddenBoolean(filteredRows);
});
})

The first issue you have is that ASP.Net Webforms changes the id of all runat="server" elements at runtime, so you cannot select by them. Even if you could, in this instance you would have duplicates, which is invalid. Instead you could add a class to those elements to identify them.
<tr>
<td>
<udc:HiddenField ID="hdnIsEmpty" runat="server" class="hiddenfield" Value='<%#Eval("IsEmpty") %>' />
</td>
</tr>
From there you can just loop over that class selector, like this:
$(document).ready(function () {
$('#tblDetails tr td .hiddenfield').each(function() {
if ($(this).val().toLowerCase() == 'true') {
// do something here...
}
});
});
If you are unable to add a class attribute on the control, you could instead make the selector more generic:
$(document).ready(function () {
$('#tblDetails tr td input:hidden:first').each(function() {
if ($(this).val().toLowerCase() == 'true') {
// do something here...
}
});
});

After taking into account the ASP.NET issue mentioned above, another alternative would be:
$(document).ready(function (){
var $hidden = $('.tableClass input.hiddenTouchableElements');
$hidden.each(function() {
if ($(this).val().toLowerCase() == 'true') {
// do something here...
}
});
});

How to change color of my div if check-box is checked?

I have table that is created based on records from data base. Inside of tbody I have tr that creates each table row. Table row has multiple time slots for same date. I want to change background color of my time block if check box is checked. I got my check box to work, I did test with alert and some text inside. Now I'm trying to change the background color but nothing works in this case that I tried so far. Here is my code:
<cfoutput query="qryTest" group="DateMeeting">
<tbody>
<tr>
<td>#DateMeeting#</td>
</tr>
<cfoutput>
<tr class="blockRow">
<td>#StartTime#</td>
<td>#EndTime#</td>
<td><input type="checkbox" name="block" id="block"></td>
</tr>
</cfoutput>
</tbody>
</cfoutput>
Java script:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
$(this).is(":checked") ? div.addClass("red") : div.removeClass("red");
});
and my css:
.red{
background-color:red;
}
This is working code that I updated. Problem number one was in html structure of my code. Second If I used document.getElementById('') I was getting only first row chnaged background-color, no matter which row I click on. So I have had to use getElementByClassName. Anyway I decided to use JQuery addClass/removeClass. Thanks everyone for help with this problem.

Try this:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
$(this).is(":checked") ? div.addClass("red") : div.removeClass("red");
});
.red{
background-color:red;
}
<cfoutput query="qryTest" group="DateMeeting">
<tbody>
<tr>
<td>#DateMeeting#</td>
<cfoutput>
<div class="blockRow">
<td>#StartTime#</td>
<td>#EndTime#</td>
<td><input type="checkbox" name="block" id="block"></td>
</div>
</cfoutput>
</tr>
</tbody>
</cfoutput>
jsfiddle:
https://jsfiddle.net/3s83gj70/2/
This gets the closest blockrow to the current checkbox so should work with more than one instance. Since you can't have 2 elements with the same id I have change blockrow to the class.
If you want to do other things based on the same condition then you can do this:
$('input[type=checkbox]').on('change', function() {
var div = $(this).closest('.blockRow');
if($(this).is(":checked")){
div.addClass("red");
//checkbox is checked, do something
}
else
{
div.removeClass("red");
//checkbox is not checked, do something else
}
});

Easy:
$('#blockRow').css("background-color","red")
------------------------------^
EDIT
Then you don't include jQuery library. To make pure js make this:
http://jsfiddle.net/bfss81sa/
document.getElementById("box").style.backgroundColor = "red";
Here you are the complete snippet:
var cbs = document.querySelectorAll('input[type=checkbox]');
for(var i = 0; i < cbs.length; i++) {
cbs[i].addEventListener('change', function() {
if(this.checked) {
document.getElementById("box").style.backgroundColor = "red";
} else {
document.getElementById("box").style.backgroundColor = "transparent";
}
});
}
<input type="checkbox" name="block" id="block">
<div id="box">
The box
</div>

Your html code is a mess. Anyway, generally :
$('input[type=checkbox]').click(function() {
if($(this).is(':checked') {
$(this).parents('tr').find('td:first').css('background', 'red');
} else {
$(this).parents('tr').find('td:first').css('background', 'white');
}
});
Of course, you can narrow the scope of input:checkbox selector.
If it is not the FIRST <td> in your <tr> then you better assign it a class and get it with it.
NOTE : DOM must be correct <cfoutput> cannot be child of <tr>; <div> cannot have <td> as direct child; Incorrect DOM impact javascript traversing.

JQuery focus on first textbox in aspxdockpanel

having problems if i wish to set focus the textbox inside the aspxdockpanel, while im testing with not using aspxdockpanel then i can be focus on the textbox, after i use aspxdockpanel then face the problem with jquery focus on the first textbox
$(document).ready(function () {
$(function () {
$('input[type!=hidden],input[type="text"], not input[type="button"]:last').first().focus();
});
});
<dx:ASPxDockPanel ID="ASPxDockPanel1" runat="server" ShowHeader="true" ClientInstanceName="ASPxDockPanel1" Border-BorderColor="Red" >
<ContentCollection>
<dx:PopupControlContentControl>
<table>
<tr>
<td>
<dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="ASPxLabel">
</dx:ASPxLabel>
</td>
<td>
<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" Width="170px" ClientInstanceName="ASPxTextBox1">
</dx:ASPxTextBox>
</td>
</tr>
</table>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:ASPxDockPanel>

As the textbox has an ID you can use it
$(document).ready(function () {
$("#ASPxTextBox1").focus ();
});
No need for function()

Try
$(document).ready(function () {
$('#ASPxDockPanel1').find('input[type="text"]:first').focus();
});
or Use ClientID
$('#<%= ASPxTextBox1.ClientID %>').focus();

how to change repeater row back color on checkbox check using java script asp.net

I want to change back color of repeater row when a particular row check box is checked client side or whenever a row td is clicked.

For that the simplest way is that you will need to output your markup in tabular format like below code:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr class="trclass" style="width:100px">
<td>
<asp:CheckBox ID="CheckBox1" runat="server" Text=""/>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<style type="text/css">
.backg
{
background-color:Blue;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id$='_CheckBox1']").click(function () {
var checked = $(this).is(':checked');
if (checked == true) {
$(this).parent().parent().addClass("backg");
}
else {
$(this).parent().parent().removeClass("backg");
}
});
$(".trclass").click(function() {
if ($(':checkbox', this).is(':checked')) {
$(this).addClass("backg");
}
else {
$(this).removeClass("backg");
}
});
});
</script>
There is a minor flaw but let me know if this is what you are looking for and we can fix it.
Edited:
I have updated the tr click code. See if that's what you want. If not can you update your question to clarify when you want the row color to change exactly and if the checbox is affected on row click?
Edit 2:
I came across this link which might be helpful.