I must be doing something stupidly wrong, but I'm not seeing it. On my site, I attach the JQuery TableSorter to a table and hope to have some sorting done, but clicks have no effect. No sorting happens. It just remains as a static table.
Here's a simplified JSFiddle of the problem I'm having:
http://jsfiddle.net/96AEE/3/
It's a very simple table with javascript as follows:
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<td>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</td>
<td>Gift Cert</td>
<td>Note</td>
<td>Order #</td>
<td>Order Date</td>
<td>Amount</td>
<td>Redeemed</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="103" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_103" name="check_103" />
</td>
<td>443ss</td>
<td>(1d10t) Arizona Tea</td>
<td>-</td>
<td>-</td>
<td>$50.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="50" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_50" name="check_50" />
</td>
<td>199e</td>
<td>(#9000) Over</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$(".tablesorter").tablesorter();
});
Is there something obvious I'm missing?
This is due to your markup on the HTML table.
Within the thead element, you need to use th tags instead of td.
<thead>
<tr>
<th></th>
...
</tr>
</thead>
Working JSfiddle:
http://jsfiddle.net/bybFK/
Try changing your header row to use <th> tags instead of <td> tags.
You are definitely neglecting something, when creating the header of your table; your are using <td> instead of using <th>
you also do not need to assign the class tablesorter to your table
<table cellspacing="0" cellpadding="0" class="tablesorter" id="gift_certificates">
<thead>
<tr class="nav">
<th>
<input type="checkbox" onclick="checkAll();" class="short" value="1" id="check_all" name="check_all" />
</th>
<th>Gift Cert</th>
<th>Note</th>
<th>Order #</th>
<th>Order Date</th>
<th>Amount</th>
<th>Redeemed</th>
</tr>
</thead>
<tbody>
<tr>
<td valign="top"></td>
<td>ss1q</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td> Sale
</td>
<td>true</td>
</tr>
<tr>
<td valign="top">
<input type="checkbox" value="87" onclick="document.getElementById('check_all').checked = false;" class="short" id="check_87" name="check_87" />
</td>
<td>F990</td>
<td>($09aa) Trouble</td>
<td>-</td>
<td>-</td>
<td>$300.00</td>
<td>-</td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$("#gift_certificates").tablesorter();
});
http://tablesorter.com/docs/
Related
Table has to be displayed in front end. Following is the code.
<logic:present name="searchStudent">
<table class=" tblSearchResult" border="1" cellspacing="0" cellpadding="0">
<caption><b><bean:message key="label.student.details.display"/></b></caption>
<tr>
<td align="center"><b><bean:message key="label.student.class.code"/></b></td>
<td align="center"><b><bean:message key="label.student.name.code"/></b></td>
<td align="center"><b><bean:message key="label.student.section.code"/></b></td>
<td align="center"><b><bean:message key="label.edit" /></b></td>
<td align="center"><b><bean:message key="label.delete" /></b></td>
</tr>
<logic:iterate name="searchStudent" id="row">
<tr>
<td rowspan="2">
<bean:write name="row" property="sclass" />
</td>
<td>
<bean:write name="row" property="sname" />
</td>
<td>
<bean:write name="row" property="section" />
</td>
<td rowspan="2" style="text-align:center;"><input
onclick="clearMessage();updateStudent(this);"
type="image"
src="${pageContext.request.contextPath}/images/pen_edit_thick.png"
class="imgEditPen"
title="<bean:message key="button.tooltip.edit"/>"></td>
<td rowspan="2" style="text-align:center;"><input
onclick="clearMessage();deleteStudent();"
type="image"
src="${pageContext.request.contextPath}/images/icon_delete.gif"
class="imgEditPen"
title="<bean:message key="button.tooltip.remove"/>"></td>
</tr>
</logic:iterate>
</table>
</logic:present>
It has three columns in table namely class,student name and section. Since class is same for some student it has to spanned across students having same class. Following is the sample output.
Data is fetched from Backend.
Colspan Attribute can merge columns in a table.
<td colspan="2">Sum: $180</td>
Example
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
Result
Refer: https://www.w3schools.com/tags/att_td_colspan.asp
Rowspan Attribute:
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
https://www.w3schools.com/tags/att_td_rowspan.asp
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>
I wrote this simple code which takes in parameters from the database Caspio to create a simple table. I just want this table to 1. remove all fields which are empty (not filled out by user) and 2. have alternating colored rows to make it easier to see. I've looked through the other forums but I can't find a good solution (I'm new to JS).The code works in JSFiddle as well as a couple of other html editors, but not all and it doesn't work when I implement it. Does anyone see the issue? I've attached all my code. Just the Javascript file, there are no other attachments.
https://jsfiddle.net/c0yoat51/
<table cellpadding="10" class="Form" BORDER="5" WIDTH="95%">
<tbody>
<tr>
<th colspan="2">
<h3>[#field:TestOrder] - [#field:Facility]</h3>
</th>
</tr>
</tbody>
<colgroup>
<col width="250" />
<col width="750" />
</colgroup>
<tbody>
<tr>
<th>FIELD</th>
<th>RESPONSE</th>
</tr>
<tr align="LEFT">
<td>Facility :</td>
<td>[#field:Facility]</td>
</tr>
<tr align="LEFT">
<td>Patient ID :</td>
<td>[#field:PatientID]</td>
</tr>
<tr align="LEFT">
<td>First Name :</td>
<td>[#field:PatientFirst]</td>
</tr>
<tr align="LEFT">
<td>Last Name :</td>
<td></td>
</tr>
<tr align="LEFT">
<td>Date of Birth:</td>
<td>[#field:DateOfBirth]</td>
</tr>
<tr align="LEFT">
<td>Gender :</td>
<td></td>
</tr>
<tr align="LEFT">
<td>Primary Phone :</td>
<td>[#field:PrimaryPhone]</td>
</tr>
<tr align="LEFT">
<td>Secondary Phone :</td>
<td>[#field:SecondaryPhone]</td>
</tr>
<tr align="LEFT">
<td>Emergency Contact :</td>
<td>[#field:EmergencyContact]</td>
</tr>
<tr align="LEFT">
<td>Emergency Number :</td>
<td>[#field:EmergencyNumber]</td>
</tr>
<tr align="LEFT">
<td>Patient Address :</td>
<td>[#field:PatientAddress]</td>
</tr>
<tr align="LEFT">
<td>City :</td>
<td>[#field:City]</td>
</tr>
<tr align="LEFT">
<td>State :</td>
<td>[#field:State ]</td>
</tr>
<tr align="LEFT">
<td>Zip Code :</td>
<td>[#field:ZipCode]</td>
</tr>
<tr align="LEFT">
<td>Special Instructions :</td>
<td>[#field:SpecialInstructions]</td>
</tr>
<tr align="LEFT">
<td>Primary Insurance :</td>
<td>[#field:PrimaryInsurance]</td>
</tr>
<tr align="LEFT">
<td>Primary Subscriber ID :</td>
<td>[#field:PrimarySubscriberID]</td>
</tr>
<tr align="LEFT">
<td>Primary Subscriber Relationship :</td>
<td>[#field:PrmarySubscriberRelationship]</td>
</tr>
<tr align="LEFT">
<td>Secondary Insurance :</td>
<td>[#field:SecondaryInsurance ]</td>
</tr>
<tr align="LEFT">
<td>Secondary Insurance ID :</td>
<td>[#field:SecondaryInsuranceID ]</td>
</tr>
<tr align="LEFT">
<td>Secondary Subscriber Relationship :</td>
<td>[#field:SecondarySubscriberRelationship ]</td>
</tr>
<tr align="LEFT">
<td>Diagnosis :</td>
<td>[#field:Diagnosis]</td>
</tr>
<tr align="LEFT">
<td>Other Diagnosis :</td>
<td>[#field:OtherDiagnosis]</td>
</tr>
<tr align="LEFT">
<td>Physician Name :</td>
<td>[#field:PhysicianName ]</td>
</tr>
<tr align="LEFT">
<td>Other Physician :</td>
<td>[#field:OtherPhysician]</td>
</tr>
<tr align="LEFT">
<td>Physician Phone :</td>
<td>[#field:PhysicianPhone]</td>
</tr>
<tr align="LEFT">
<td>Physician Fax :</td>
<td>[#field:PhysicianFax]</td>
</tr>
<tr align="LEFT">
<td>After Hours Phone :</td>
<td>[#field:AfterHoursPhone]</td>
</tr>
<tr align="LEFT">
<td>Test Order :</td>
<td>[#field:TestOrder]</td>
</tr>
<tr align="LEFT">
<td>Test Duration :</td>
<td>[#field:TestDuration]</td>
</tr>
<tr align="LEFT">
<td>Holter Performed :</td>
<td>[#field:HolterPerformed]</td>
</tr>
<tr align="LEFT">
<td>Holter Test Order :</td>
<td>[#field:HolterTestOrder]</td>
</tr>
<tr align="LEFT">
<td>Holter Duration :</td>
<td>[#field:HolterDuration]</td>
</tr>
<tr align="LEFT">
<td>Previous Holter Date :</td>
<td>[#field:PreviousHolterDate]</td>
</tr>
<tr align="LEFT">
<td>Requested Start Date :</td>
<td>[#field:RequestedStartDate]</td>
</tr>
<tr align="LEFT">
<td>Receive Monitor :</td>
<td>[#field:ReceiveMonitor]</td>
</tr>
<tr align="LEFT">
<td>Recorder ID Number :</td>
<td>[#field:RecorderIDNumber ]</td>
</tr>
<tr align="LEFT">
<td>H_P :</td>
<td>[#field:H_P]</td>
</tr>
<tr align="LEFT">
<td>Upload HP :</td>
<td>[#field:UpploadHP]</td>
</tr>
<tr align="LEFT">
<td>Authorize :</td>
<td>[#field:Authorize]</td>
</tr>
<tr align="LEFT">
<td>Submit :</td>
<td></td>
</tr>
</tbody>
</table>
<script type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('.Form tr').filter(function() {
return $(this).find('td:eq(1):empty').length > 0;
}).hide();
</script>
<style type="text/css">
tr:nth-child(even) {
background-color: #D3D3D3
}
</style>
Please help, and thanks!
All the javascript code is at the bottom, the rest is just making the table
So the same code, copied and pasted won't be working at https://html-online.com/editor/
you need apply your code with in document.ready .It will run only window after load.nbsp; not select from :empty .you need to trim() .Then only get the empty space td also .! matching the empty element of td
$(document).ready(function() {
$('.Form').find('tbody tr').filter(function() {
return !$(this).find('td:eq(1)').text().trim()
}).hide()
})
Updated
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nisha Jewellery</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.Form').find('tbody tr').filter(function() {
return !$(this).find('td:eq(1)').text().trim()
}).hide()
})
</script>
<style type="text/css">
tr:nth-child(even) {
background-color: #D3D3D3
}
</style>
</head>
<body>
<table class="Form" border="5" width="95%" cellpadding="10">
<thead>
<tr>
<th colspan="2">
<h3>[#field:TestOrder] - [#field:Facility]</h3>
</th>
</tr>
</thead>
<colgroup>
<col width="250" />
<col width="750" /> </colgroup>
<tbody>
<tr>
<th>FIELD</th>
<th>RESPONSE</th>
</tr>
<tr align="LEFT">
<td>Facility :</td>
<td>[#field:Facility]</td>
</tr>
<tr align="LEFT">
<td>Patient ID :</td>
<td>[#field:PatientID]</td>
</tr>
<tr align="LEFT">
<td>First Name :</td>
<td>[#field:PatientFirst]</td>
</tr>
<tr align="LEFT">
<td>Last Name :</td>
<td> </td>
</tr>
<tr align="LEFT">
<td>Date of Birth:</td>
<td>[#field:DateOfBirth]</td>
</tr>
<tr align="LEFT">
<td>Gender :</td>
<td> </td>
</tr>
<tr align="LEFT">
<td>Primary Phone :</td>
<td>[#field:PrimaryPhone]</td>
</tr>
<tr align="LEFT">
<td>Secondary Phone :</td>
<td>[#field:SecondaryPhone]</td>
</tr>
<tr align="LEFT">
<td>Emergency Contact :</td>
<td>[#field:EmergencyContact]</td>
</tr>
<tr align="LEFT">
<td>Emergency Number :</td>
<td>[#field:EmergencyNumber]</td>
</tr>
<tr align="LEFT">
<td>Patient Address :</td>
<td>[#field:PatientAddress]</td>
</tr>
<tr align="LEFT">
<td>City :</td>
<td>[#field:City]</td>
</tr>
<tr align="LEFT">
<td>State :</td>
<td>[#field:State ]</td>
</tr>
<tr align="LEFT">
<td>Zip Code :</td>
<td>[#field:ZipCode]</td>
</tr>
<tr align="LEFT">
<td>Special Instructions :</td>
<td>[#field:SpecialInstructions]</td>
</tr>
<tr align="LEFT">
<td>Primary Insurance :</td>
<td>[#field:PrimaryInsurance]</td>
</tr>
<tr align="LEFT">
<td>Primary Subscriber ID :</td>
<td>[#field:PrimarySubscriberID]</td>
</tr>
<tr align="LEFT">
<td>Primary Subscriber Relationship :</td>
<td>[#field:PrmarySubscriberRelationship]</td>
</tr>
<tr align="LEFT">
<td>Secondary Insurance :</td>
<td>[#field:SecondaryInsurance ]</td>
</tr>
<tr align="LEFT">
<td>Secondary Insurance ID :</td>
<td>[#field:SecondaryInsuranceID ]</td>
</tr>
<tr align="LEFT">
<td>Secondary Subscriber Relationship :</td>
<td>[#field:SecondarySubscriberRelationship ]</td>
</tr>
<tr align="LEFT">
<td>Diagnosis :</td>
<td>[#field:Diagnosis]</td>
</tr>
<tr align="LEFT">
<td>Other Diagnosis :</td>
<td>[#field:OtherDiagnosis]</td>
</tr>
<tr align="LEFT">
<td>Physician Name :</td>
<td>[#field:PhysicianName ]</td>
</tr>
<tr align="LEFT">
<td>Other Physician :</td>
<td>[#field:OtherPhysician]</td>
</tr>
<tr align="LEFT">
<td>Physician Phone :</td>
<td>[#field:PhysicianPhone]</td>
</tr>
<tr align="LEFT">
<td>Physician Fax :</td>
<td>[#field:PhysicianFax]</td>
</tr>
<tr align="LEFT">
<td>After Hours Phone :</td>
<td>[#field:AfterHoursPhone]</td>
</tr>
<tr align="LEFT">
<td>Test Order :</td>
<td>[#field:TestOrder]</td>
</tr>
<tr align="LEFT">
<td>Test Duration :</td>
<td>[#field:TestDuration]</td>
</tr>
<tr align="LEFT">
<td>Holter Performed :</td>
<td>[#field:HolterPerformed]</td>
</tr>
<tr align="LEFT">
<td>Holter Test Order :</td>
<td>[#field:HolterTestOrder]</td>
</tr>
<tr align="LEFT">
<td>Holter Duration :</td>
<td>[#field:HolterDuration]</td>
</tr>
<tr align="LEFT">
<td>Previous Holter Date :</td>
<td>[#field:PreviousHolterDate]</td>
</tr>
<tr align="LEFT">
<td>Requested Start Date :</td>
<td>[#field:RequestedStartDate]</td>
</tr>
<tr align="LEFT">
<td>Receive Monitor :</td>
<td>[#field:ReceiveMonitor]</td>
</tr>
<tr align="LEFT">
<td>Recorder ID Number :</td>
<td>[#field:RecorderIDNumber ]</td>
</tr>
<tr align="LEFT">
<td>H_P :</td>
<td>[#field:H_P]</td>
</tr>
<tr align="LEFT">
<td>Upload HP :</td>
<td>[#field:UpploadHP]</td>
</tr>
<tr align="LEFT">
<td>Authorize :</td>
<td>[#field:Authorize]</td>
</tr>
<tr align="LEFT">
<td>Submit :</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
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>
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.