Generate N Number Of Table Rows Depending On Value Of Input Jquery

Question

Floor Nam

Solution 1:

see your updated fiddle: http://jsfiddle.net/fq42seff/3/

i first added the class="floor" to all your floor input boxes, to have a unique selector for these input boxes. the entry field for the amount of floors and the total field is excluded.

then i changed your js the following:

//created two functions addFloors() and removeFloors()
function addFloors(actual, target){
  for(i = actual +1;i<=target;i++) //this loop creates the new floors
    {
      newItemHTML = '<tr><td ><p>' + i + 'th Floor</p></td><td><input type="text" name="" class="floor InputBox " id="floor' + i + '"></td></tr>';
      //i also changed the html inside the first td from <span> to <p> to match your html markup
      $("table#floor tr").last().before(newItemHTML);
    }
}

function removeFloors(target){
  if(target >= 4) //remove all floors except the base 4
  {
    $('.floor').slice(target).parent().parent().remove(); 
    //since i select the .floor input box, i have to use the parent() function two times, to move the selector up to the <tr> element
  }
}

next, we extend your change function:

$("#nostorey").bind('change', function() {
  curVal = $.trim($(this).val()).match(/^\d*$/); //get the value from the first input box
  curFloors = $('.floor').length; //get the current nbr of floors

if(curVal > curFloors)  //if you want more floors, then currently available
{
    addFloors(curFloors, curVal);  //add floors
}else if(curVal < curFloors)  //if you want less
{
    removeFloors(curVal);  //remnove them
}

last but not least, enable/disable the first 4 input boxes:

$('.floor').each(function(index){  //for each .floor input box
  if(index >= curVal)  //if it's index is greater then the needed floor count
  {
    $(this).prop('disabled', true);  //disable it
  }else
  {
    $(this).prop('disabled', false);  //else enable it
  }
});

the last part - the enabling/disabling could be splitted and extend the add/remove functions - this would make them get run only when needed. right now, it gets executed on every value change. but i guess, you can figure out the rest by yourself...

Solution 2:

I added a grid of checkboxes depending on the number of floors also upon generating these checkboxes i put an attribute for each checkboxes depending on which row they are in. The span text or that row will be the value of the checkboxes for that row. With the help of

Guruprasad Rao

he came up with this fiddle

Fiddle

For code betterment feel free to update the fiddle to help others

Solution 3:

Correct me if I am wrong. Here is my for loop.

else {

var floors = parseInt($("#nostorey").val()-4); 

$("tr[id^=floor]").hide();

if(floors != NaN){

for(i=5;i<floors+5 ;i++){

    var newItemHTML = '<tr id="floor'+i+'"><td ><span>' + i + 'th Floor</span></td><td><input type="text" name="" class="InputBox floor"' + i + '"></td></tr>';

    $("table#floor tr").last().before(newItemHTML);
}

}

javascript nyumon

Generate N Number Of Table Rows Depending On Value Of Input Jquery

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Generate N Number Of Table Rows Depending On Value Of Input Jquery"