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

这是我的代码，告诉我输入文本中有多少楼层默认情况下我有4层楼。 on Onchange onstorey输入我想添加其余楼层当前我所做的是设置if else但是这不是我想要的方式，因为这种方式，如果我减少楼层数量不减少数量写入区域的输入。我想询问如何使这成为可能

以层数输入中的数字大于4的方式设置它将添加剩余的楼层。
当数字减少时，表格中的输入数量也应减少，但不低于默认值4

这是Sample

UPDATED sample here

Answer 1

查看您的更新小提琴：http://jsfiddle.net/fq42seff/3/

我首先将class="floor"添加到您的所有地板输入框中，以便为这些输入框添加唯一的选择器。不包括楼层数和总字段的输入字段。

然后我改变了你的js：

//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
  }
}

接下来，我们扩展您的更改功能：

$("#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
}

最后但并非最不重要的是，启用/禁用前4个输入框：

$('.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
  }
});

最后一部分 - 启用/禁用可以拆分并扩展添加/删除功能 - 这将使它们仅在需要时运行。现在，它会在每次价值变化时执行。但我想，你可以自己弄明白其余的......

Answer 2

我根据楼层数添加了一个复选框网格，在生成这些复选框时，我根据它们所在的行为每个复选框设置了一个属性。范围文本或该行将是该复选框的值。行。在

的帮助下

Guruprasad Rao

他提出了这个小提琴

Fiddle

为了改进代码，请随时更新小提琴以帮助他人

Answer 3

如果我错了，请纠正我。这是我的for循环。

＆＃13;

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

＆＃13;

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

3 个答案: