根据输入jquery的值生成n个表行 [英] generate n number of table rows depending on value of input jquery
本文介绍了根据输入jquery的值生成n个表行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< input type =numberid =nostoreyname =class ='InputBox'/>
< table id =floor>
< tr id =headtable>
< td>
< center>地板名称< / center>
< / td>
< td>
< center>明智区域< / center>
< / td>
< / tr>
< tr>
< td>
< p> 1楼< / p>
< / td>
< td>
< input type ='text'id =firstfloorname =''maxlength =10value =class ='InputBox'/>
< / td>
< / tr>
< tr>
< td>
< p> 2楼< / p>
< / td>
< td>
< input type ='text'id =secondfloorname =''maxlength =10value =class ='InputBox'/>
< / td>
< / tr>
< tr>
< td>
< p> 3楼< / p>
< / td>
< td>
< input type ='text'id =thirdfloorname =''maxlength =10value =class ='InputBox'/>
< / td>
< / tr>
< tr>
< td>
< p> 4楼< / p>
< / td>
< td>
< input type ='text'id =fourthfloorname =''maxlength =10value =class ='InputBox'/>
< / td>
< / tr>
< tr>
< td>
< p>总计< / p>
< / td>
< td>
< input type ='text'id =totalreadonly name =''maxlength =10value =class ='InputBoxD'/>
< / td>
< / tr>
< / table> （$ .bim（$（this）.val（））< 5）{ （$（this）.val（）。match（/ ^ \d * $ /））{
if（$（this）.val（）== 1）{
console.log（1）;
console.log（$（this）.val（））;
$（'＃secondfloor'）。prop（'disabled'，true）; $ （'disabled'，true）;
$（'＃thirdfloor'）。prop（'disabled'，true）;
} else if（$ （this）.val（）== 2）{
console.log（2）;
console.log（$（this）.val（））;
$（' （'disabled'，false）; $ b $（'＃thirdfloor'）。prop（'disabled'，true）; $ b $（'＃fourthfloor'）。prop（' （$（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 =textname =class =InputBoxid =floor+ $（this）.val（）+'> ;< / TD>< / TR>';
$（table＃floor tr）。last（）。before（newItemHTML）;
}
}）;
这是我的代码，可以告诉我在我的输入文本中有多少楼层，默认情况下我有4层。 onstorey输入中的 Onchange 我想添加剩下的楼层，我现在要做的就是设置其他功能，但是这不是我想要的方式，因为如果我减少它不会减少写入区域的输入数量。我想询问一下如何使这成为可能
- 通过这种方式，当楼层输入的数量超过4时，将增加剩余的楼层。
-
当数字减少时，表格中的输入数量也应该减少，但不能小于默认值4
这是示例
已更新示例
这里
解决方案
http://jsfiddle.net/fq42seff/3/
我首先将 class =floor添加到所有楼层输入框中，以便为这些输入框设置唯一的选择器。
然后我改变了你的js以下内容：
//创建了两个函数addFloors（）和removeFloors（）
函数addFloors（actual，target）{
for（i = actual +1; i< = target; i ++）//此循环创建新楼层
{
newItemHTML ='< tr>< td>< p>'+ i +'th Floor< / p><< ; / td>< td>< input type =textname =class =floor InputBoxid =floor+ i +'>< / td>< / tr>';
//我也将第一个td中的html从< span>到< p>以匹配您的html标记
$（table＃floor tr）。last（）。before（newItemHTML）;
函数removeFloors（target）{
if（target> = 4）//移除除底数之外的所有楼层4
{ $（'。floor'）。slice（target）.parent（）。parent（）。remove（）;
//因为我选择.floor输入框，所以我必须使用parent（）函数两次，才能将选择器移动到< tr>元素
}
}
接下来，我们扩展您的更改函数： p>
$（＃nostorey）。bind（'change'，function（）{
curVal = $ .trim $（this）.val（））。match（/ ^ \ d * $ /）; //从第一个输入框中获取值
curFloors = $（'。floor'）。length; // （curVal> curFloors）//如果你想要更多的楼层，那么当前可用
addFloors（curFloors，curVal）; //添加楼层
} else if（curVal< curFloors）//如果你想减去
{
removeFloors（curVal）; //删除它们
}
最后但并非最不重要的是，启用/禁用前4个输入框：
< pre $ <'c $ c> $（'。floor'）。each（function（index）{//为每个.floor输入框添加
if（index> = curVal）//如果索引大于所需的楼层数
{
$（this）.prop（'disabled'，true）; // disable it
} else
{
$（本）.prop （'disabled'，false）; // else enable it
}
}）;
最后一部分 - 启用/禁用可以分割并扩展添加/删除功能 - 这将会只有在需要时才让它们运行。现在，它会在每次更改值时执行。但我想，你可以自己找出其余的......
<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
- Make it in a way that when the number in storey input is more than 4 it will add the remaining floors.
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
解决方案
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...
这篇关于根据输入jquery的值生成n个表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
