Checked in table html - javascript

$(function() {
$('.sus').click(function(e) {
if($(".case").is(":checked")){
for (var i = Things.length; i >= 0; i++) {
Things[i]
}
alert("checkeado");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success sus">Success</button>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Checkbox</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
I'm trying to make ckecked to be showing me the first name of which is ckecked.
As shown in the picture
Or make a for which to cross the table and show me the ones that are checked
enter image description here


This should work for you. You will need to remove the extra comma (,) at the end.
$(function() {
$('.sus').click(function(e) {
var checkedNames = '';
var $things = $('.case:checked');
if($things.length > 0){
for (var i = 0; i < $things.length; i++) {
checkedNames += $($things[i]).closest('tr').find('td:first').text() + ',';
}
alert("checkeado " + checkedNames);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success sus">Success</button>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Checkbox</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>
<input type="Checkbox" class="case">
</td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>

Related

Display respective text box when checkbox is checked in a table

Display respective text box when checkbox is checked in the table which is inside the form.
The rows will generate dynamically depending upon the data send from the server, along with the data.
When the checkbox is checked the text box of that row should be displayed otherwise it should be hidden
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"/></td>
<td><input type="text" name="send-quality" id="send-quality"/></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required/></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary/"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

You can try this:
$(".table input[name='product-status']").change(function(){
if($(this).is(":checked")){
$(this).parents("tr:eq(0)").find("input[name='send-quality']").show();
}
else{
$(this).parents("tr:eq(0)").find("input[name='send-quality']").hide();
}
});
input[name='send-quality']
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"</td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

Using $(this).is(":checked"), see if the checkbox is checked. If it is checked, show the relevant input box. I have added a class hidden to each input box for this demo:
$('input[type=checkbox]').on('click', function() {
if ($(this).is(":checked"))
$(this).parents("tr:first").find('.hidden').show();
else
$(this).parents("tr:first").find('.hidden').hide();
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<form class="available-products-table">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality" /> </td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td>1</td>
<td>Shoes</td>
<td>50</td>
<td>adidas</td>
<td>Black</td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="text" class='hidden' name="send-quality" id="send-quality"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="text" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

Getting value from specific cell in an html table is not working using JQuery

I am trying to get row data from a table so I can use it in a modal. Below is my code for Views.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<link href="~/Content/themes/base/all.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$("#acctInfo").DataTable();
$(".td_0").hide();
});
</script>
<!-- Page Title
============================================= -->
<section id="page-title">
<div class="container clearfix">
<h1>View Accounts</h1>
</div>
</section><!-- #page-title end -->
<section id="content">
<div class="content-wrap">
<div class="container clearfix">
<table class="table table-striped table-condensed table-hover" id="acctInfo">
<thead>
<tr>
<th class="td_0">Account Id</th>
<th>Employee Id</th>
<th>First Name</th>
<th>Middle Name</th>
<th>Last Name</th>
<th>Business Name</th>
<th>Account Type</th>
<th></th>
#*<th></th>*#
</tr>
</thead>
<tbody>
#foreach (var i in Model.AccountsViews)
{
<tr id="rowx">
<td > #Html.DisplayFor(m => i.AcctId)</td>
<td > #Html.DisplayFor(m => i.EmployeeId)</td>
<td > #Html.DisplayFor(m => i.FirstName)</td>
<td > #Html.DisplayFor(m => i.MiddleName)</td>
<td > #Html.DisplayFor(m => i.LastName)</td>
<td > #Html.DisplayFor(m => i.BusinessName)</td>
<td > #Html.DisplayFor(m => i.AccountType)</td>
#*<td>Edit</td>
<td>Delete</td>*#
<td>
<input type="button" value="Edit" class="btn btn-success form-control" onclick="OpenSelected()" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</section>
<div id="divEdit" style="display: none;">
<input type="hidden" id="hidId"/>
<table>
<tr>
<td>Employee Id</td>
<td><input type="text" id="txtEmployeeId" class="form-control"/></td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text" id="txtFirstName" class="form-control"/></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="txtMiddleName" class="form-control"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="txtLastName" class="form-control"/></td>
</tr>
<tr>
<td>Business Name</td>
<td><input type="text" id="txtBusinessName" class="form-control"/></td>
</tr>
#*<tr>
<td>Account Type</td>
<td>
#Html.DropDownListFor(o => )
</td>
</tr>*#
</table>
</div>
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
With that code, I am able to invoke the alert method with the following code:
<script>
function OpenSelected() {
var a = $('.trSelected td').eq(4).text();
alert(a);
}
</script>
but it has no value of the cell that I need. It only has "localhost/1234 Says: " the alert has no value. I need your help. Thank you.

Give a try to following code... .closset would give you the selected row and than you find columns value on the base of indexes.
<script>
$('.btn-success').click(function () {
var a = $(this).closest("tr").find('td:eq(0)').text();
var b = $(this).closest("tr").find('td:eq(1)').text();
alert(a);
});
</script>

Try using :eq() selector at this context
You should use .text() instead to retrieve its text content,
var t = $('#table');
var val1 = $(t).find('tr:eq(2) td:eq(4)').text();
alert(val1);
Or do,
alert($('#table tr:eq(2) td:eq(4)').text());
DEMO

How to enable and disable button when click checkbox button using JQuery

I want When single checkbox is selected that time Edit and Delete Button are Enable, Add Button Disable
When Two or more checkbox are selected that time Delete Button is Enable and Add and Edit Button are Disable
My Html Code :
<div>
<button type="button" id="btnAddID" name="btnAdd"> Add </button>
<button type="button" id="btnEditID" name="btnEdit"> Edit </button>
<button type="button" id="btnDeleteID" name="btnDelete"> Delete </button>
</div>
<br/>
<div>
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>ABC</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>PQR</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>MLN</td>
</tr>
</tbody>
</table>
</div>
</div>

I guess this snippet is what you need.
This is the simplest way but you could do better if you want.
$(document).ready(function(){
$('input[type=checkbox]').change(function(){
var count = 0;
$.each($('input[type=checkbox]'), function(){
if($(this).prop('checked') == true){
count++;
}
});
if(count == 1) {
$('#btnEditID').prop('disabled', false);
$('#btnDeleteID').prop('disabled', false);
$('#btnAddID').prop('disabled', true);
}
else {
$('#btnDeleteID').prop('disabled', false);
$('#btnEditID').prop('disabled', true);
$('#btnAddID').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<button type="button" id="btnAddID" name="btnAdd"> Add </button>
<button type="button" id="btnEditID" name="btnEdit"> Edit </button>
<button type="button" id="btnDeleteID" name="btnDelete"> Delete </button>
</div>
<br/>
<div>
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>ABC</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>PQR</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>MLN</td>
</tr>
</tbody>
</table>
</div>
</div>

Try this:
$('input[type="checkbox"]').change(function(){
var checked = $('input[type="checkbox"]:checked').length;
if(checked === 0){
$("button").prop('disabled',false);
}else if(checked === 1){
$("button").prop('disabled',false);
$("#btnAddID").prop('disabled', true);
}else{
$("#btnAddID,#btnEditID").prop('disabled', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button type="button" id="btnAddID" name="btnAdd"> Add </button>
<button type="button" id="btnEditID" name="btnEdit"> Edit </button>
<button type="button" id="btnDeleteID" name="btnDelete"> Delete </button>
</div>
<br/>
<div>
<table>
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>ABC</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>XYZ</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>PQR</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>MLN</td>
</tr>
</tbody>
</table>
</div>

how to expand the table row on click of check box?

Onclick of the checkbox I want to expand the table row and and ask for additional information using labels and input tag.But this coming in the straight line and I want this in the new line.
below is the example.
function serverVn(obj) {
document.getElementById(obj.id + "expand").innerHTML = "<div id='Vn'><label>VNumber:</label><input id='INVn' class='form-control' type='text'/></div>"
}
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>firstname</th>
<th>lastname</th>
<th>dOB</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id='use0' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<td></td>
<br/>
<td>
<div id='use0expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use1' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<td></td>
<br/>
<td>
<div id='use1expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use2' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td></td>
<td></td>
<td></td>
<td>30</td>
<td></td>
<br/>
<td>
<div id='use2expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use3' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<br/>
<td>
<div id='use3expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use4' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<br/>
<td>
<div id='use4expand'></div>
</td>
</tr>
<tr>
<td>
<input id='use5' type='checkbox' name='chkbox' onchange='serverVN(this)' />
</td>
<td>john</td>
<td>john</td>
<td></td>
<td>30</td>
<br/>
<td>
<div id='use5expand'></div>
</td>
</tr>
</tbody>
</table>

JS is case sensitive.
Your is invalid HTML
use jQuery now you have it
Put xxxexpand in a new ROW / cell instead of a cell in the same row
Add the obj id to the input too to make unique IDs
I removed the div since you already have a cell you can use
I also remove the new row when unchecked
$(function() {
$(".sVN").on("click", function() {
$("#" + this.id + "expand").html(this.checked ? "<label for='INVn" + this.id + "' >VNumber:</label><input id='INVn" + this.id + "' class='form-control' type='text'/>" : "");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>firstname</th>
<th>lastname</th>
<th>dOB</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id='use0' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use0expand'></td>
</tr>
<tr>
<td>
<input id='use1' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use1expand'></td>
</tr>
<tr>
<td>
<input id='use2' type='checkbox' name='chkbox' class="sVN" />
</td>
<td> </td>
<td> </td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use2expand'></td>
</tr>
<tr>
<td>
<input id='use3' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use3expand'></td>
</tr>
<tr>
<td>
<input id='use4' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use4expand'></td>
</tr>
<tr>
<td>
<input id='use5' type='checkbox' name='chkbox' class="sVN" />
</td>
<td>john</td>
<td>john</td>
<td> </td>
<td>30</td>
<td> </td>
</tr>
<tr>
<td colspan="6" id='use5expand'></td>
</tr>
</tbody>
</table>

Convert existing input and table to Kendo Textbox and Kendo Grid

I have a login form and I would like to kendofy it i.e. basically convert it into a responsive form like this: http://demos.telerik.com/kendo-ui/validator/index
Is there a quick way that would allow me to convert my existing username and password fields to kendo textbox fields such that I am able to achieve the responsive design without actually creating the fields again myself? Looking forward to your suggestions.
My Form:
<form action="https://../Portal" method="post" name="loginForm">
<input name="act" value="portalLogin" type="hidden">
<input name="c" value="12912" type="hidden">
<input name="p" value="101074" type="hidden">
<input name="d" value="101076" type="hidden">
<input name="g" value="101097" type="hidden">
<input name="objDefId" value="13439" type="hidden">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<div id="rbi_S_101098" name="Notification Message">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="k-content" id="rbi_S_101100" name="User Login">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<table>
<tbody>
<tr>
<td nowrap="" align="right"><strong>Login Name </strong>
</td>
<td nowrap="">
<input class="k-textbox" name="loginName" maxlength="50" size="40" type="text">
</td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td nowrap="" align="right"><strong>Password </strong>
</td>
<td nowrap="">
<input class="k-textbox" name="password" maxlength="50" size="40" type="password">
</td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td></td>
<td alignmant="right" nowrap="">
<strong><input class="btn btn-small" value=" Login " type="submit"></strong> </td>
</tr>
<tr height="5">
<td></td>
</tr>
<tr>
<td></td>
<td alignment="right" nowrap="">
Forgot your password? </td>
</tr>
</tbody>
</table>
</td>
<script>
document.loginForm.loginName.focus();
</script>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div id="rbi_S_114558" name="Scripts Section">
<table class="wide rbwhite" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="detailHTMLCol" colspan="2">
</td>
</tr>
</tbody>
</table>
</div>
<table class="wide" height="10px">
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Cheers.

Categories

Resources