I am trying to do the following effect, the rows are already present on the page, so I guess is something about jquery syntax, but I am not very smart on jquery, yet.
http://kobikobi.wordpress.com/2008/09/15/using-jquery-to-filter-table-rows/
Its just not working, and yes the jquery libraries are included.
Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//add index column with all content.
$(".filterable tr:has(td)").each(function () {
var t = $(this).text().toLowerCase(); //all row text
$("<td class='indexColumn'></td>")
.hide().text(t).appendTo(this);
}); //each tr
$("#FilterTextBox").keyup(function () {
var s = $(this).val().toLowerCase().split(" ");
//show all rows.
$(".filterable tr:hidden").show();
$.each(s, function () {
$(".filterable tr:visible .indexColumn:not(:contains('"
+ this + "'))").parent().hide();
}); //each
}); //key up.
}); //document.ready
</script>
<table class="filterable">
<tr>
<th>
name
</th>
<th>
yearsExperienceRequired
</th>
<th>
Actions
</th>
<th>
Index Column
</th>
</tr>
#foreach (var item in Model) {
<tr class="indexColumn">
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.DisplayFor(modelItem => item.yearsExperienceRequired)
</td>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.PositionID }) |
#Html.ActionLink("Details", "Details", new { id = item.PositionID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.PositionID })
</td>
</tr>
}
</table>
The generated HTML is the following one,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>Eva 1.0</h1>
</div>
<div id="logindisplay">
Welcome <strong>eva</strong>!
[ Register New User ]
[ Log Off ]
[ Change Password ]
</div>
<nav>
<ul id="menu">
<li> DashBoard</li>
<li> Positions </li>
<li> Prospects </li>
<li> Prospect History </li>
<li> Technical Interview </li>
<li> Manager Interview </li>
<li> Current Employees </li>
<li> Current Employees History </li>
</ul>
</nav>
</header>
<section id="main">
<h2>Index</h2>
<p>
Create New
</p>
Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//add index column with all content.
$(".filterable tr:has(td)").each(function () {
var t = $(this).text().toLowerCase(); //all row text
$("<td class='indexColumn'></td>").hide().text(t).appendTo(this);
}); //each tr
$("#FilterTextBox").keyup(function () {
var s = $(this).val().toLowerCase().split(" ");
//show all rows.
$(".filterable tr:hidden").show();
$.each(s, function () {
$(".filterable tr:visible .indexColumn:not(:contains('"+ this + "'))").parent().hide();
}); //each
}); //key up.
}); //document.ready
</script>
<table class="filterable">
<tr>
<th>
name
</th>
<th>
Years of Experience Required
</th>
<th>
Index Column
</th>
<th>
Actions
</th>
</tr>
<tr class="indexColumn">
<td>
.net developer
</td>
<td>
5
</td>
<td>
.net developer
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr class="indexColumn">
<td>
java developer
</td>
<td>
5
</td>
<td>
java developer
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</table>
</section>
<footer>
</footer>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
</body>
</html>
When I test your code in JS bin everything is working.
http://jsbin.com/ipobiz
You can edit it in the right corner.
He did give a warning about a line break in your
$(".filterable tr:visible .indexColumn:not(:contains('"
+ this + "'))").parent().hide();
thou but that's probably because I just copied pasted the code from here.
Possible fixes
Your previous javascript files might be cached. Try CTRL + F5 to do a full refresh of everything.
Try separating your code from your view and try it again because that seems to work just fine here.
Add a alert(t); or console(t);in this function:
This will show you the values that are put in the IndexColumn. If he doesn't show any of your values then something is wrong with the for each in your jquery.
$(".filterable tr:has(td)").each(function () {
var t = $(this).text().toLowerCase(); //all row text
//alert(t); or console(t); here
$("<td class='indexColumn'></td>")
.hide().text(t).appendTo(this);
});
Related
I have written the below code to display a selection of images within a tag when a certain button is clicked on a page. The Jquery to hide the elements on page load works, but the rest of the code does nothing. Can anyone help me figure this out please?
$(document).ready(function(){
//Create Array for images
var vanImgArr = new Array("<img src='img\yvr\coalharbour.jpg'>", "<img src='img\yvr\lgbridge.jpg'>", "<img src='img/yvr/yaletown.jpg'/>", "<img src='img\yvr\lgbridge2.jpg'>");
var sgpImgArr = new Array("<img src='img\sgp\elginbridge.jpg'>", "<img src='img\sgp\mbfc.jpg'>", "<img src='img\sgp\sgpdusk.jpg'>", "<img src='img\sgp\sgppano.jpg'>");
var aniImgArr = new Array("<img src='img\ani\cat1.jpg'>", "<img src='img\ani\cat2.jpg'>", "<img src='img\ani\dog1.jpg'>", "<img src='img\ani\tandd.jpg'>");
var absImgArr = new Array("<img src='img\abs\abs1.jpg'>", "<img src='img\abs\abs2.jpg'>", "<img src='img\abs\abs3.jpg'>", "<img src='img\abs\abs4.jpg'>");
var clickedId;
var idx = 0;
//to display images
function displayImgs(arr)
{
if(idx <= arr.length)
{
('#pic').hide();
('#pic').html(arr[idx]);
('#pic').fadeIn('slow');
if(idx > arr.length)
{
idx = 0;
}
else
{
idx++;
}
}; //button click close
}//displayImgs method close
//on page load
$('p').hide();
//More info Action
$('#more').hover(function(){
$('#info, #info2').fadeIn('slow');
});
//Button Click Action
$(':button').click(function(){
clickedId = this.id;
alert(clickedId); //testing
switch(clickedId)
{
case 'yvr':
displayImgs(vanImgArr);
break;
case 'sgp':
displayImgs(sgpImgArr);
break;
case 'ani':
displayImgs(aniImgArr);
break;
case 'abs':
displayImgs(absImgArr);
break;
}//switch/case close
});//button click close
});
Here is my HTML code to go with the above
<!DOCTYPE html>
<title>Ricky Deacon CSIS3380-001, Assignment 2, Summer 2017</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
<table class="t1">
<tr>
<th width="25%" rowspan="3"><img src="img\rick2.JPG" alt="RD portrait goes here"></th>
<th width="50%" colspan="2">Rick Deacon</th>
<th width="25%" rowspan="3"><img src="img\rick1.JPG" alt="RD portrait goes here"></th>
</tr>
<tr>
<td id="subtitle" colspan="2">Photography Showcase</td>
</tr>
<tr>
<td id="desc" colspan="2">Click the corresponding button to display images from your chosen category.</td>
</tr>
</table>
<br/>
<br/>
<table class="t2">
<tr>
<th>
<input id="van" type="button" name="submit" value="Show Vancouver Images"/>
</th>
<th>
<input id="sgp" type="button" name="submit" value="Show Singapore Images"/>
</th>
<th>
<input id="ani" type="button" name="submit" value="Show Animal Images"/>
</th>
<th>
<input id="abs" type="button" name="submit" value="Show Abstract Images"/>
</th>
</tr>
<tr>
<th>
<p id="info">Rick Deacon's Flickr</p>
</th>
<th colspan="2">
<h1 id="more">More Info and Portfolio Links</h1>
</th>
<th>
<p id="info2">Prints For Sale</p>
</th>
</tr>
</table>
<br/>
<br/>
<p id="pic" align="center">Image Goes Here</p>
I think you've forgotten about the $ sign on your code.
Your display function should be like this
function displayImgs(arr){
if(idx <= arr.length)
{
$('#pic').hide();
$('#pic').html(arr[idx]);
$('#pic').fadeIn('slow');
if(idx > arr.length)
{
idx = 0;
}
else
{
idx++;
}
}; //button click close
}//displayImgs
Also, shouldn't you use one idX for each array?
Your JavaScript refers to elements which don't exist in your markup.
First, there are no elements with the id of "more", so the "More Info" action will never run. Second, you are targeting a button element in your "Button Click" action, but I see no button elements either--just <input type="button" />, which you must specify using $(":button, input[type='button']") (Either one of those two selectors will work).
You are selecting button tag while there is no button tag in your html. You should select input tag using $('input[type="button"]')
but this might not be good practice at the time of debugging so you should assign input tag a name and then select them using
$('input[name="elementname"]').
Second .In "this.id" is not proper syntax you should use $(this).attr('id');
I have an input search field and a div, in that div is a table that I can search through with the input search field;
$(document).on("click", '#zoekenbtn', function (event) {
$("#zoekenpanel").toggle('slide', { direction: 'left' });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="zoekenbtn" type="search" placeholder="🔎"/>
<div class="zoekdiv">
<input type="button" class="zoekclose" value="X" />
<div class="zoektablediv">
<table class="zoektable">
<tr id="myhead">
<th>
Klant
</th>
<th>
Locatie
</th>
<th>
Plaats
</th>
</tr>
#foreach (var temp in Model.Select(x => new { x.Id, x.Klant, x.Locatie, x.Plaats }))
{
<tr name="sysinfo" itemscope itemid="#temp.Id" class="info" data-url="#Url.Action("searchresult", "Klanten", new { id = temp.Id})">
<td>
#temp.Klant
</td>
<td>
#temp.Locatie
</td>
<td>
#temp.Plaats
</td>
</tr>
}
</table>
</div>
<input id="zoekenbtn" type="search" placeholder="🔎"/>
but this causes a problem; if you click on the input and click somewhere else. you're no longer focussed on the input, thus you can't type in it anymore. so you have to click it again to be able to type. which toggles the div again and closes it.
I need a way so that it doesn't toggle, but slides open from left to right.
Thank you :)
add
$(document).keypress(function() {
$("#zoekenbtn").focus();
});
it would capture the keystroke and focus in you input field
$(document).on("click", '#zoekenbtn', function (event) {
$("#zoekenpanel").toggle('slide', { direction: 'left' });
});
$(document).keypress(function() {
$("#zoekenbtn").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="zoekenbtn" type="search" placeholder="🔎"/>
<div class="zoekdiv">
<input type="button" class="zoekclose" value="X" />
<div class="zoektablediv">
<table class="zoektable">
<tr id="myhead">
<th>
Klant
</th>
<th>
Locatie
</th>
<th>
Plaats
</th>
</tr>
#foreach (var temp in Model.Select(x => new { x.Id, x.Klant, x.Locatie, x.Plaats }))
{
<tr name="sysinfo" itemscope itemid="#temp.Id" class="info" data-url="#Url.Action("searchresult", "Klanten", new { id = temp.Id})">
<td>
#temp.Klant
</td>
<td>
#temp.Locatie
</td>
<td>
#temp.Plaats
</td>
</tr>
}
</table>
</div>
I found what I wanted, I succeeded by adding
$(document).on("click", '#zoekenbtn', function (event) {
if ($('#zoekenpanel').is(":hidden")) {
$("#zoekenpanel").toggle('slide', { direction: 'left' });
}
});
This way the slideToggle won't toggle while the panel is open :)
calling all JavaScript Gurus. I'm going bananas, in the following script if I remove the Alert the code does not work. But I obviously cannot leave a pop up in the middle of my ASP.NET web App
Not that it matters much but this code is in a Index.cshtml that contains a partial called IndexSearch Results.cshtml. Code at the bottom but its just the Javascript below I think is the issue ::
Something is missing I cannot figure it, many thanks for looking...
#section Scripts {
#Scripts.Render("~/bundles/tablesorter")
<script type="text/javascript">
$(document).ready(function () {
$('a').each(function () {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
});
$('#LoadingGif').empty().html(' Loading...');
Init();
});
function Init() {
if ($("#myTable").find("tr").size() > 1) {
alert('Without this Alert the Tablesorter does not apply formatting, i.e. no paging, no zebra, nothing just one big list, odd');
$("#myTable").tablesorter({ dateFormat: "uk", widgets: ['zebra'], sortList: [[4, 0]] }).tablesorterPager({ container: $("#pager") });
$('tr').live('click', function (e) {
//if not clicking an anchor tag or imag then assume user wants to go to details page
if ((!$(e.target).is('a')) && (!$(e.target).is('img')) && (!$(e.target).is('th')) && !(e.target.isTextEdit)) {
if ($(this).attr('rowid') != null)
window.location = 'SupplyPoint/Details/' + $(this).attr('rowid');
}
});
} else {
$("#myTable").hide(); $("#pager").hide();
}
return false;
};
});
</script>
Here is Index.CSHTML:
#model IEnumerable<AscendancyCF.Models.SupplyPoint>
#{
ViewBag.Title = "Index";
}
<style>
.tooltiptext {
display: none;
}
</style>
<h2></h2>
<fieldset>
<legend>
<img width="50" height="50" src="~/content/images/bPremise.jpg" /> Use the Search fields provided to Locate a Premise
</legend>
<table class="NoHighlight">
<tr>
<td></td>
<td>
SSID<br />
#Html.TextBox("SearchSPID", string.Empty, new { style = "float:left;width:150px;" })
<div style="clear:both;"></div>
</td>
<td></td>
<td>
Premise Name<br />
#Html.TextBox("SearchPremise", string.Empty, new { style = "float:left;width:170px;" })
<div id="Div1" style="float:left; padding-left:5px;"></div>
<div style="clear:both;"></div>
</td>
#*<td>
Effective Start >=<br />
<div class="col-md-10">
#Html.TextBox("StartDate")
</div>
</td>
<td>
Effective End<br />
<div class="col-md-10">
#Html.TextBox("EndDate")
</div>
</td>*#
<td>
<a href="#test" class="btn btn-default" id="searchButton" >Search</a>
<div class="tooltiptext">
Key less by entering only part of a Search String <b>i.e.</b> key <i>Garage</i> to find <i>all premises containing this text</i> quickly
</div>
</td>
<td>
<div id="LoadingGif"></div>
</td>
</tr>
</table>
</fieldset>
<div id="ResultsList" style="clear:both;">
#Html.Partial("IndexSearchResults")
</div>
#section Scripts {
#Scripts.Render("~/bundles/tablesorter")
<script type="text/javascript">
$(document).ready(function () {
$('a').each(function () {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
});
$('#LoadingGif').empty().html(' Loading...');
Init();
});
function Init() {
if ($("#myTable").find("tr").size() > 1) {
alert('Without this Alert the Tablesorter does not apply formatting, i.e. no paging, no zebra, nothing just one big list, odd');
$("#myTable").tablesorter({ dateFormat: "uk", widgets: ['zebra'], sortList: [[4, 0]] }).tablesorterPager({ container: $("#pager") });
$('tr').live('click', function (e) {
//if not clicking an anchor tag or imag then assume user wants to go to details page
if ((!$(e.target).is('a')) && (!$(e.target).is('img')) && (!$(e.target).is('th')) && !(e.target.isTextEdit)) {
if ($(this).attr('rowid') != null)
window.location = 'SupplyPoint/Details/' + $(this).attr('rowid');
}
});
} else {
$("#myTable").hide(); $("#pager").hide();
}
return false;
};
});
</script>
}
and here is IndexSearchResults.cshtml:
#model IEnumerable<AscendancyCF.Models.SupplyPoint>
#{
ViewBag.Title = "Index";
}
<p><h5><div id="noRecords">Your search returned #Model.Count() items</div></h5></p>
<table class="tablesorter" id="myTable">
<thead>
<tr>
<th></th>
<th>
#Html.DisplayNameFor(model => model.SPID)
</th>
<th>
#Html.DisplayNameFor(model => model.SupplyPointName)
</th>
<th>
#Html.DisplayNameFor(model => model.GazateerRef)
</th>
<th>
#Html.DisplayNameFor(model => model.SupplyPointEffectiveDateTime)
</th>
<th>
Premise Type
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr rowid="#item.SupplyPointId">
<td>
<img src="~/Content/images/edit.png" id="imgEdit" alt='Edit Details' title='Edit Details'>
</td>
<td>
#Html.DisplayFor(modelItem => item.SPID)
</td>
<td>
#Html.DisplayFor(modelItem => item.SupplyPointName)
</td>
<td>
#Html.DisplayFor(modelItem => item.GazateerRef)
</td>
<td>
#Html.DisplayFor(modelItem => item.SupplyPointEffectiveDateTime)
</td>
<td>
#Html.DisplayFor(modelItem => item.SupplyPointType.SupplyPointTypeName)
</td>
</tr>
}
</tbody>
</table>
<div class="pager" id="pager">
<form>
<img src="~/Content/Images/first.gif" id="iFirst" class="first" />
<img src="~/Content/Images/prev.gif" class="prev" />
<input type="text" class="pagedisplay" />
<img src="~/Content/Images/next.gif" class="next" />
<img src="~/Content/Images/last.gif" class="last" />
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="100">100</option>
<option value="500">500</option>
</select>
</form>
</div>
jQuery.load is asynchronous, so it will return before the content is loaded. In the Init function, you are trying to use the content before it has been loaded. The alert() is making it succeed, since it allows the content to be loaded.
Instead of calling Init() immediately after the load() call, you should move it inside the callback.
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
Init(); // <--- Here
});
$('#LoadingGif').empty().html(' Loading...');
});
I've got the below code on my view, and everything is working fine. I've got a dropdown, and got a list of tables below the drop-down. I'd like to write a jquery code that only displays one table at a time depending on the selected drop-down value. My first method would be having all the tables on client-side and just 'filtering' them using jquery, and my second method would be using an ajax request to the server and updating the table. Please have a look at the code below. Any help would be greatly appreciated - Thanks
<div id="dropDown" class="span11">
<div class="row-fluid">
<div class="span4">
Select Year of Manufacturing
</div>
<div class="span8">
#Html.DropDownListFor(x => x.Products.SingleOrDefault().Year, #productItems)
</div>
</div>
foreach (var item in Model.Products) {
<h3>#item.Year</h3>
<div id="dropDownDiv">
<table class="table table-bordered">
<tr>
<th>
ProductId
</th>
<th>
Name
</th>
<th>
Description
</th>
<th>
Price
</th>
<th>
Proposed Price
</th>
</tr>
<tr>
<td>#item.Id
</td>
<td>#item.Name
</td>
<td>
#item.Description
</td>
<td>#item.Price
</td>
<td>
<input type="number" />
</td>
</tr>
</table>
</div>
}
</div>
For Ajax Request, I'm thinking to do something like this, but not sure how to proceed.
<script>
//Filter By Year
$(function () {
$("select#Year").change(function (evt) {
if ($("select#Year").val() != "-1") {
$.ajax({
url: "/AjaxDropDown/FilterByYear",
type: 'Post',
data: { Year: $("select#Year").val() },
success: function (data) {
//Need some code here
}
});
}
});
});
</script>
Also, at some point I would like to enable inline editing on this table using ajax, so that the users can submit their proposed price..Thanks
First I would update your markup like so in order to keep id's unique and to add a nice means of selecting the divs:
<div id="dropDown" class="span11">
<div class="row-fluid">
<div class="span4">
Select Year of Manufacturing
</div>
<div class="span8">
#Html.DropDownListFor(x => x.Products.SingleOrDefault().Year, productItems)
</div>
</div>
foreach (var item in Model.Products) {
<div id="#string.Format("dropDownDiv_{0}", item.Year)" class="dropDownDiv">
<h3>#item.Year</h3>
<table class="table table-bordered">
<tr>
<th>
ProductId
</th>
<th>
Name
</th>
<th>
Description
</th>
<th>
Price
</th>
<th>
Proposed Price
</th>
</tr>
<tr>
<td>#item.Id
</td>
<td>#item.Name
</td>
<td>
#item.Description
</td>
<td>#item.Price
</td>
<td>
<input type="number" />
</td>
</tr>
</table>
</div>
}
</div>
and then you can filter by year like so without the ajax request if they're all on the page:
$(function () {
$("#Year").change(function (evt) {
var year = $("#Year").val();
// Hide all divs with class dropDownDiv but show the one with the appropriate id
$('.dropDownDiv').hide().filter('#dropDownDiv_' + year).show();
});
});
jsFiddle: http://jsfiddle.net/dg5bZ/6/
<script>
//Filter By Year
$(function () {
$("select#Year").change(function (evt) {
if ($("select#Year").val() != "-1") {
$.ajax({
url: "/AjaxDropDown/FilterByYear",
type: 'Post',
data: { Year: $("select#Year").val() },
success: function (data) {
var records = $.evalJSON(data);
var Years= $("select#Year");
// clear all previous options
$("select#Year > option").remove();
// populate the records
for (i = 0; i < records.length; i++) {
Years.append($("<option />").val(records[i].Value).text(records[i].Text));
}
}
});
}
});
});
</script>
I want the serial no: to increase whenever a row is inserted dynamically. and when any row is deleted whether in the beginning or in the end or in-between, the numbers should rearrange themselves in proper order. I'm a fresher and could not get a logic on how to do it. Can anyone pls guide me on the same. Thanks in advance for the support.
I have given my sample coding below. On clicking the "(+)" button, the row increases automatically. when that is happening, i want the serial no also to increment automatically. And when any row is deleted, (even in middle of the table), then the numbers should automatically adjust themselves in proper order. Pls guide me on the same.
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
id=1;
var serial =1;
$('#butVal').click(function(){
var master = $(this).parents("#table-2");
id++;
var sample = master.find('.tabRow').clone();
sample.attr("id", id + "item");
master.find('.tabRow').removeClass('tabRow');
master.find('tbody').append(sample);
//alert(master);
//alert(sample);
//alert(sample.html());
//alert(master.html());
var rowLen = $('#table-2 > tbody >tr').length;
//alert(rowLen);
if(rowLen>9)
{
alert("no of row is reached 10");
}
}
);
$('table#table-2 button.remove').live('click', function(){
if($("table#table-2 tbody tr").length > 1)
{
if($("table#table-2 tbody tr").index($(this).parents('tr')) ==$("table#table-2 tbody tr").length -1)
{
$(this).parents('tr').prev().addClass("tabRow");
}
$(this).parents('tr').remove();
}
else
{
alert("you can.t remove this record");
}
} );
});
//jquery ends here
</script>
<style type="text/css">
.total
{
border:1px solid black;
width:90%;
height:1250px;
margin-left:auto;
margin-right:auto;
}
.add
{
width:100%;
}
.add select,input
{
width:100%;
}
</style>
</head>
<body>
<div class="total">
<table id="table-2" class="add" border ="1">
<thead>
<tr><th class="small"> S.No</th><th> Product Status </th> <th> Stock Status</th> <th class="sizing"> Description</th> <th> Quantity </th> <th> Price </th> <th> Total </th >
<th> <button id="butVal"> + </button></th></tr>
</thead>
<tbody>
<tr class="tabRow" id="1item">
<td class="sno"> </td>
<td><select><option> New </option><option> Old </option></select> </td>
<td><select><option> In Stock </option><option> Out Of Stock </option></select> </td>
<td> <input type="text" name="desc"/> </td>
<td> <input type="text" name="qty"/> </td>
<td> <input type="text" name="price"/> </td>
<td> <input type="text" name="total"/> </td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> Grand Total </td>
<td> </td>
<td> <button id="proceed" onClick="payment();"> Proceed </button> </td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
I made some changes to your code at jsfiddle.net. The link is: http://jsfiddle.net/2nzgG/30/. All my comments can be found in the javascript section. I hope this is what you are looking for. Let me know if you need anything else.
EDIT:
I also added the code below, but the comments will be found in the link...
$(document).ready( function() {
$('#butVal').click(function(){
var rowLen = $('tr.tabRow').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow:first").clone(true).appendTo("#table-2>tbody");
$(".tabRow:last").children("td").children("input").each(function(index, element){
$(element).val("");
});
}
});
$(document).on("click", "button.remove", function(){
if($(this).parents("tr").siblings("tr.tabRow").length > 0)
{
$(this).closest("tr.tabRow").remove();
}
else
{
alert("you can.t remove this record");
}
});
//FOR Serial Number- use ON
$(document).on("click", ".add, .remove", function(){
$("td.sno").each(function(index,element){
$(element).text(index + 1);
});
});
});