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

 
 
 
 Floor Names 
 
 Floor wise Area 
 
 
 
 
1st Floor
 
 
  
 
 
 
 
2nd Floor
 
 
  
 
 
 
 
3rd Floor
 
 
  
 
 
 
 
4th Floor
 
 
  
 
 
 
 
Total
 
 
  
 
 
 $("#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 = '' + $(this).val() + 'th Floor'; $("table#floor tr").last().before(newItemHTML); } }); 

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

1. 使其成为当层数输入中的数字大于4时，它将添加剩余的楼层。

2. 当数字减少时，表格中的输入数量也应减少，但不低于默认值4

   这是样本

这里 UPDATED sample

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 = '
' + i + 'th Floor
'; //i also changed the html inside the first td from  to 
 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  element } } 

接下来，我们扩展您的更改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 } 

最后但并非最不重要的是，启用/禁用前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 } }); 

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

Answer 2

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

Guruprasad Rao

他想出了这个小提琴

小提琴

对于代码改进，随时更新小提琴，以帮助他人

Answer 3

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

 else { var floors = parseInt($("#nostorey").val()-4); $("tr[id^=floor]").hide(); if(floors != NaN){ for(i=5;i' + i + 'th Floor'; $("table#floor tr").last().before(newItemHTML); } }