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();
Related
This question already has answers here:
Is it possible to get the value of a <td> element using onclick?
(6 answers)
Closed 6 years ago.
I want to get the value of the td I click
I have a table ,in this table I have many tr and td
I want to get the value of the td I selected
<table id="table" class="table" style="margin-right: auto; margin-left: auto" >
<thead>
<tr>
<th>Numero demande</th>
<th>Date prelevement</th>
<th>Um executante</th>
<th>Id preleveur</th>
</tr>
</thead>
<tbody>
#foreach(var dem in #Model)
{
<tr>
<td><a id="lienFicheDemande"> #dem.DPR</a></td>
<td>#dem.Dateprelevement </td>
<td>#dem.UM </td>
<td>#dem.PRELEVEUR.NOMCOMPLET </td>
<td id="iddem" hidden="hidden">#dem.DPR<</td>
</tr>
}
</tbody>
</table>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('#lienFicheDemande').click(function (e) {
alert($('#iddem')[0].innerHTML);
window.open("Appli/Home/FicheDemande?iddem=" + $('#iddem').value, "nom_popup", " menubar=no");
});
});
</script>
i want to pass the value of dem_dpr into the link in javascript
First of all, you cannot use IDs this way. They need to be unique per document. Use class instead of IDs. Then, you can use .closest('.iddem') to grab the element closest to the link you clicked and use .html() or .text() to grab it's value.
Example:
<table id="table" class="table" style="margin-right: auto; margin-left: auto" >
<thead>
<tr>
<th>Numero demande</th>
<th>Date prelevement</th>
<th>Um executante</th>
<th>Id preleveur</th>
</tr>
</thead>
<tbody>
#foreach(var dem in #Model)
{
<tr>
<td><a class="lienFicheDemande"> #dem.DPR</a></td>
<td>#dem.Dateprelevement </td>
<td>#dem.UM </td>
<td>#dem.PRELEVEUR.NOMCOMPLET </td>
<td class="iddem" hidden="hidden">#dem.DPR<</td>
</tr>
}
</tbody>
</table>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('.lienFicheDemande').click(function (e) {
alert($(this).closest('.iddem').html());
window.open("Appli/Home/FicheDemande?iddem=" + $(this).closest('.iddem').html(), "nom_popup", " menubar=no");
});
});
</script>
$(document).ready(function () {
$('td').click(function () {
window.open("Appli/Home/FicheDemande?iddem=" + $(this).text(), "nom_popup"," menubar=no");
});
});
For every TD, bind click function in each of them.
.text() function will get only the text in TD out from it.
It is best if you could put ID for the table.
So if you have added ID to the table. The solution would be like this:
$(document).ready(function () {
$('#table_id td').click(function () {
window.open("Appli/Home/FicheDemande?iddem=" + $(this).text(), "nom_popup"," menubar=no");
});
});
<table class="table table-hover">
<thead>
<tr><th> Block</th>
<th>Size</th></tr>
</thead>
<tbody id="poolTable" class="tbody">
<tr>
<td>78</td>
<td>18</td>
</tr>
<tr>
<td>52</td>
<td>21</td>
</tr>
<tr>
<td>54</td>
<td>19</td>
</tr>
</tbody>
</table>
Hi, I want to filter the html table data by using jquery,
can anyone try to resolve this please!!
Please try bellow JavaScript for to get content of each td
$("#filter").keyup(function(){
var filter = $(this).val();
$("#poolTable > tr").each(function(e){
cells = this.cells;
for(i=0; i< cells.length; i++){
alert(cells[i].innerHTML);
}
});
})
function filter(){
var text = $('#search').val();
$('#poolTable tr').show();
if (text != "") {
$('#poolTable tr td.number').each(function() {
if ($(this).text().indexOf(text) >= 0) {
$(this).parent().show();
return true;
} else {
$(this).parent().hide();
}
});
This works. Here number is the class name of td. It only filters the single column.
You can try this
https://sunnywalker.github.io/jQuery.FilterTable/
It is a jQuery plugin that will allow you to filter your table.
I am adding footables to a table but the table has to have a tbody for each row. This is because I am adding footable sorting and filtering to an existing system that generates the html this way.
It seems to be causing the column sorting at the to be duplicating the table rows each time you try to sort the table by column heading and I cant see why.
The table structure is kinda like this:
<table data-filter="#filter" class="footable table demo">
<thead>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Status</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Job Title1</td>
<td>Active</td>
<td>Description1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Name2</td>
<td>Job Title2</td>
<td>Disabled</td>
<td>Description2</td>
</tr>
</tbody>
</table>
javascript:
$(function () {
$("table").footable().bind("footable_filtering", function (e) {
var selected = $(".filter-status").find(":selected").text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? " " + selected : selected;
e.clear = !e.filter;
}
});
$(".clear-filter").click(function (e) {
e.preventDefault();
$(".filter-status").val("");
$("table.demo").trigger("footable_clear_filter");
});
$(".filter-status").change(function (e) {
e.preventDefault();
$("table.demo").trigger("footable_filter", {
filter: $("#filter").val()
});
});
});
I have also set up a working jsfiddle that demonstrates the issue:https://jsfiddle.net/35ht6kup/9/
Anybody have any idea how to resolve this?
You could rebuild the table with jQuery, example (to be refined with a better selector than 'table'):
$(document).ready(function(){
var thead = $('table thead');
var tbodyhtml;
$('table tbody').each(function(){
tbodyhtml += $(this).html();
});
$('table').html(thead);
$('table').append('<tbody>'+tbodyhtml+'</tbody>');
});
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);
hello guys? can you please help with this? i have this tables in HTML.what i want to achieve is that, when i click the row the checkbox will be checked and the row will be highlighted.and is it possible with the checkbox column hidden?
<table border="1" id="estTable">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Chris</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Cass</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Aldrin</td>
<td>16</td>
</tr>
</tbody>
</table>
<input type="button" value="Edit" id="editbtn"/>
<div id="out"></div>
and i have this javascript to get the values of the selected row.And i was hoping to print one row at a time.
$('#editbtn').click(function(){
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
This gets a little easier when you use classes to add more context to your source:
<tr>
<td class="select hidden">
<input type="checkbox">
</td>
<td class="name">Chris</td>
<td class="age">10</td>
</tr>
Then you can do something like this:
$(document).ready(function () {
'use strict';
$('#estTable tbody tr').click(function (e) {
//when the row is clicked...
var self = $(this), //cache this
checkbox = self.find('.select > input[type=checkbox]'), //get the checkbox
isChecked = checkbox.prop('checked'); //and the current state
if (!isChecked) {
//about to be checked so clear all other selections
$('#estTable .select > input[type=checkbox]').prop('checked', false).parents('tr').removeClass('selected');
}
checkbox.prop('checked', !isChecked).parents('tr').addClass('selected'); //toggle current state
});
$('#editbtn').click(function (e) {
var selectedRow = $('#estTable .select :checked'),
tr = selectedRow.parents('tr'), //get the parent row
name = tr.find('.name').text(), //get the name
age = parseInt(tr.find('.age').text(), 10), //get the age and convert to int
p = $('<p />'); //create a p element
$('#out').append(p.clone().text(name + ': ' + age));
});
});
Live demo: http://jsfiddle.net/Lf9rf/
if i understand the "print one row at a time" correctly, i think you need to empty your "out" selector before executing the new call
$('#editbtn').click(function(){
$('#out').empty();
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
jsBin demo
CSS:
.highlight{
background:gold;
}
jQuery:
$('#estTable tr:gt(0)').click(function( e ){
var isChecked = $(this).find(':checkbox').is(':checked');
if(e.target.tagName !== 'INPUT'){
$(this).find(':checkbox').prop('checked', !isChecked);
}
$(this).toggleClass('highlight');
});