根据输入jquery的值生成n个表行

Question

<input type="number" id="nostorey" name="" class=' InputBox' />

<table id="floor">
    <tr id="headtable">
        <td>
            <center>Floor Names</center>
        </td>
        <td>
            <center>Floor wise Area</center>
        </td>
    </tr>
    <tr>
        <td>
            <p>1st Floor</p>
        </td>
        <td>
            <input type='text' id="firstfloor" name='' maxlength="10" value="" class=' InputBox' />
        </td>
    </tr>
    <tr>
        <td>
            <p>2nd Floor</p>
        </td>
        <td>
            <input type='text' id="secondfloor" name='' maxlength="10" value="" class=' InputBox' />
        </td>
    </tr>
    <tr>
        <td>
            <p>3rd Floor</p>
        </td>
        <td>
            <input type='text' id="thirdfloor" name='' maxlength="10" value="" class=' InputBox' />
        </td>
    </tr>
    <tr>
        <td>
            <p>4th Floor</p>
        </td>
        <td>
            <input type='text' id="fourthfloor" name='' maxlength="10" value="" class=' InputBox' />
        </td>
    </tr>
    <tr>
        <td>
            <p>Total</p>
        </td>
        <td>
            <input type='text' id="total" readonly name='' maxlength="10" value="" class=' InputBoxD' />
        </td>
    </tr>
</table>

  $("#nostorey").bind('change', function() {
  if ($.trim($(this).val()) < 5) {
    if ($(this).val().match(/^\d*$/)) {
      if ($(this).val() == 1) {
        console.log("1");
        console.log($(this).val());
        $('#secondfloor').prop('disabled', true);
        $('#thirdfloor').prop('disabled', true);
        $('#fourthfloor').prop('disabled', true);
      } else if ($(this).val() == 2) {
        console.log("2");
        console.log($(this).val());
        $('#secondfloor').prop('disabled', false);
        $('#thirdfloor').prop('disabled', true);
        $('#fourthfloor').prop('disabled', true);
      } else if ($(this).val() == 3) {
        console.log("3");
        console.log($(this).val());
        $('#secondfloor').prop('disabled', false);
        $('#thirdfloor').prop('disabled', false);
        $('#fourthfloor').prop('disabled', true);
      } else if ($(this).val() == 4) {
        console.log("4");
        console.log($(this).val());
        $('#secondfloor').prop('disabled', false);
        $('#thirdfloor').prop('disabled', false);
        $('#fourthfloor').prop('disabled', false);
      }
    }
  } else {
    var newItemHTML = '<tr><td ><span>' + $(this).val() + 'th Floor</span></td><td><input type="text" name="" class="InputBox " id="floor' + $(this).val() + '"></td></tr>';
    $("table#floor tr").last().before(newItemHTML);
  }
});

This is my code to tell how many floor I have in my input text by default I have 4 floors. Onchange of onstorey input I want to add the remaining floors currently what i did is to set if else but this is not working the way i want it because this way if I reduce the number of floor it is not reducing the number of input to write the area. I want to ask idea on how to make this possible

1. Make it in a way that when the number in storey input is more than 4 it will add the remaining floors.

2. When the number is reduced the number of input in the table should also decrease, but not less than the default value which is 4

   This is the Sample

UPDATED sample here

Answer 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...

Answer 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

Answer 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); } }