根据输入值 jquery 生成 n 行 table 行

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 层楼，用于在我的输入文本中告知我有多少层楼。 Onchange onstorey input 我想添加剩余的楼层，目前我所做的是设置 if else 但这不是我想要的方式，因为这样如果我减少楼层数它不会减少数量输入写入区域。我想问一下如何使这成为可能

当楼层输入的数字超过 4 时，它会添加剩余的楼层。
当数字减少时table中输入的数字也应该减少，但不能小于默认值4

这是Sample

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

最后但同样重要的是，enable/disable前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
  }
});

最后一部分 - enabling/disabling 可以拆分并扩展 add/remove 功能 - 这将使它们仅在需要时获得运行。现在，它会在每次值更改时执行。但我想，你可以自己想出剩下的...

Answer 2

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

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

}

Answer 3

我根据楼层数添加了一个复选框网格，在生成这些复选框时，我为每个复选框设置了一个属性，具体取决于它们所在的行。跨度文本或该行将是复选框的值对于那一行。在

的帮助下

Guruprasad Rao

他想到了这个 fiddle

Fiddle

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

根据输入值 jquery 生成 n 行 table 行

generate n number of table rows depending on value of input jquery

html

javascript

jquery

onchange