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);
});
});

Unmark checkbox when there is no more TR and TABLE goes hide

I'm working on this function for remove any marked checkbox in a selector container element. The code works fine but has a small problem: I'm not able to uncheck the first checkbox (the one that toggle all the checkboxes in a selector2 container). Now this is the code for remove the checked checkboxes:
function eliminarMarcados(selector, toggleMsg, msgSelector) {
$(selector + " input[type='checkbox']:checked").closest("tr").not('.tableHead').remove();
if (toggleMsg) {
if ($(selector + " tbody tr").length == 0) {
$(msgSelector).show();
$(selector).hide();
// 1st test didn't work since it's not right
//$(selector + " tr").hasClass('tableHead').$(selector + " input[type='checkbox']").prop('checked', false);
}
}
}
And this is how I call it:
$("#btnEliminarNorma").on('click', function () {
eliminarMarcados("#tablaNorma", true, "#alertSinNorma");
});
This is the code I'm using for toggle all checkboxes checked:
function marcarTodosCheck(selChk, tableBody) {
$(selChk).on('click', function () {
var $toggle = $(this).is(':checked');
$(tableBody).find("input:checkbox").prop("checked", $toggle).trigger("change");
});
$(tableBody).find("input:checkbox").on('click', function () {
if (!$(this).is(':checked')) {
$(selChk).prop("checked", false).trigger("change");
} else if ($(tableBody).find("input:checkbox").length == $(tableBody).find("input:checkbox:checked").length) {
$(selChk).prop("checked", true).trigger("change");
}
});
}
And I call it as follow:
marcarTodosCheck("#toggleCheckNorma", "#tablaNorma");
And this is the HTML code behind this:
<table class="table table-condensed" id="tablaNorma">
<thead>
<tr class="tableHead">
<th><input type="checkbox" id="toggleCheckNorma" name="toggleCheckNorma"></th>
<th>Nro.</th>
<th>Norma COVENIN</th>
<th>Año de Publicación</th>
<th>Comité Técnico</th>
</tr>
</thead>
<tbody id="normaBody">
<tr class="">
<td><input type="checkbox" value="5"></td>
<td>382</td><td>Sit alias sit.</td>
<td>1970</td><td>Velit eum.</td>
</tr>
<tr class="">
<td><input type="checkbox" value="6"></td>
<td>38362</td>
<td>Et voluptatem.</td><td>1976</td>
<td>Et voluptatem.</td>
</tr>
</tbody>
</table>
How I can unmark the first checkbox?

I've just made a Fiddle with an additional <button id="btnEliminarNorma">Uncheck</button> to remove the checkmarks and the adjustment of your first approach in the function eliminarMarcados() :
$(selector).find(" input[type='checkbox']").prop('checked', false);

Add attribute to <tr> from text

I'm trying to write a jQuery takes the value from the between the tags to be an attribute named data-row-key="xx"
my html looks like this:
<table id="linksgrid">
<thead>
</thead>
<tbody>
<tr class="grid-row">
<td class="grid-cell" data-name="BrokenLink_ID">1</td>
</tr>
<tr class="grid-row">
<td class="grid-cell" data-name="BrokenLink_ID">2</td>
</tr>
</tbody>
</table>
but I need to look like this:
<table id="Table1">
<thead>
</thead>
<tbody>
<tr class="grid-row" data-row-key="1">
<td class="grid-cell" data-name="BrokenLink_ID">1</td>
</tr>
<tr class="grid-row" data-row-key="2">
<td class="grid-cell" data-name="BrokenLink_ID">2</td>
</tr>
</tbody>
</table>
noticed the added attribute to the tag,
any help or hint to point me in the right direction will be greatly appreciated, thanks
UPDATE
before I posted the question i tried
$('td[data-name="BrokenLink_ID"]').each(function() {
var id = $(this).text();
var table = document.getElementById('linksgrid');
var rows = table.rows;
for (var i = 0, 1 = rows.lenght; i < l; i++) {
rows[i].data = id
}
});

$('#linksgrid tr').each(function() {
$(this).data('row-key', $(this).text());
// or $(this).attr('data-row-key', $(this).text());
});

Something like this:
$('.grid-cell').each(function() {
$(this).parent().attr('data-row-key', $(this).text());
});

// run a function on each instance of .grid-row
$('.grid-row').each(function() {
// grab the text from the current child .grid-cell
var myAttrVal = $(this).find('.grid-cell').text();
// add the attribute to this row
$(this).attr('data-row-key', myAttrVal);
});

Select all tr elements and add a data-row-key value as follows:
$('#linksgrid tbody tr').data('row-key', function() {
return $('td', this).text();
});

$('.grid-row').each(function() {
var no = $(this).children('td').text()
$(this).attr('data-row-key', no);
});

$('.grid-cell').each(function(){ // loop through each grid-cell
var currentValue = $(this).text(); // get its text
$(this).closest('.grid-row').attr('data-row-key', currentValue); // add the attribute to the grid-cell's parent
});

enable disable textbox inside a table when checkbox checked

I am using jQuery. How to enable or disable textbox inside a table when checkbox checked.
This is my edit.cshtml.
<table id="scDetails" class="dataTable">
<thead>
<tr>
<th>RItem</th>
<th>IChecked</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
#foreach (var fback in Model.Fbacks)
{
<tr>
<td #Html.DisplayFor(m => fback.RItem)</td>
<td>#Html.CheckBoxFor(m => fback.IChecked)</td>
<td>#Html.TextBoxFor(m => fback.Notes)</td>
</tr>
}
</tbody>
</table>
What i have tried is:
$('td :checkbox').change(function () {
var parentTx = $(this).closest('tr').find(input[type = "text"]);
if (this.checked) {
parentTx.attr("disabled",false);
} else {
parentTx.attr("disabled", true);
}
});
Where am doing wrong? I dont want to use any classes on the controls to achieve this.

You missed the quotes, and you could simply your code with:
$('td input[type="checkbox"]').change(function () {
$(this).closest('tr').find('input[type="text"]').prop('disabled', !this.checked);
}).change();

Issue related to getting class name in jquery

I have the following HTML:
<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
<tr class="row1">
<td></td>
</tr>
<tr class="row2">
<td></td>
</tr>
</table>
and the following jQuery :
<script>
$(document).ready(function () {
var Tabletr= $(".ChatBox > tbody > tr:odd");
});
</script>
how can i get the class name of Odd row in Jquery?

Simply
var $elems = $("table.ChatBox tr:odd"); should work.
To get their classes(heads up to Juicy Scripter below),
$elems.each(function(){ console.log(this.className); //do whatever with the class names. });

Try this:
<script>
$(document).ready(function () {
var Tabletr= $(".ChatBox").children("td:odd").attr("class");
alert (Tabletr);
}
});
</script>
You can also use :first instead of :odd if you wish to get the first td class.

jQuery itself doesn't provide direct way to retrieve DOM element class other than using attr method of jQuery or className property for element in JavaScript after you get the elements:
$(document).ready(function () {
var Tabletr= $(".ChatBox > tbody > tr:odd");
var firstElementClass = Tabletr.eq(0).attr('class');
// Previous is the same as
var firstElementClass = Tabletr.get(0).className;
// Due to fact that Tabletr may contain more that one row you may want to iterate and collect classes names.
var classes = [];
Tabletr.each(function(){
classes.push(this.className);
// OR
classes.push($(this).attr('class'));
});
});

You can simplify your selector:
var Tabletr = $(".ChatBox tr:odd")
This gives you a jQuery object for each odd row in your table. If there's just one such row, you could do this:
var Tabletr = $('.ChatBox tr:odd')[0].className; // -> "row2"
But if there are multiple rows, you need something more like this:
var TableRowClasses = $(".ChatBox tr:odd").map( function(){
return this.className;
}).get();
This gives you an array with every odd row's class as an element. So you'd end up with an array like this:
["row2","row4","row6"] // confusing odd-row classnames notwithstanding

I've look at your code and the following changes gave me the result your after.
<table id="ChatTable" class="ChatBox" style="margin-left:0px !important">
<tr class="row1">
<td></td>
</tr>
<tr class="row2">
<td></td>
</tr>
<tr class="row3">
<td></td>
</tr>
<tr class="row4">
<td></td>
</tr>
</table>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
$(".ChatBox tr:odd").each(function () {
//test
alert($(this).attr("class"));
});
});
</script>