javascript - 根据输入 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);
  }
});

这是我的代码，用于告诉我输入文本中有多少层，默认情况下我有 4 层。 onstorey 输入的 Onchange 我想添加当前剩余的楼层，我所做的是设置 if else 但这并没有按照我想要的方式工作，因为这样如果我减少楼层数，它就不会减少写入区域的输入次数。我想询问如何实现这一点

1. 当输入的楼层数超过 4 时，将添加剩余楼层。

2. 当数量减少时，表中输入的数量也应该减少，但不能小于默认值 4

   这是Sample

更新示例 here

Answer 1

查看您更新的 fiddle :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
  }
});

最后一部分 - 启用/禁用可以分开并扩展添加/删除功能 - 这将使它们仅在需要时运行。现在，它会在每次值更改时执行。但我想，剩下的你可以自己弄清楚......