Logica_
2015-07-14 09:14
采纳率: 93.5%
浏览 1.8k

jquery如何根据文本框中输入的数,实现数组循环

实现了点击添加选项增加行,但是每次增加一行都要用一个else if,所以在后面我增加了一个

 最多<input type="text" name="maxnum" style="width: 4%"/>项

用来输入本次添加选项需要设置多少项,超出就做出提示,做了很久还是做不出来,菜鸟求助各位

 <script>
 function del(t){
     $(t).parent('div').remove();
}
function add(){
     var lastInput = $('#contain input:last');
     var phName = lastInput.attr('placeholder');
     var maxNum = $("#maxnum").val();

     phName = phName.replace("选项","");
     if(phName=='1'){
          phName='2'
     }else if(phName=='2'){
          phName='3'
     }else if(phName=='3'){
          phName='4'
     }else if(phName=='4'){              **_  //这部分如何用数组循环实现_**
          phName='5'
     }else if(phName=='5'){
          phName='6'
     }
     $('<div class="inputs"><input input type="text" id="commentx" name="comment" maxlength="30" style="width: 80% "  placeholder="选项'+phName+'" /><span onclick=del(this)>删除</span></div>').insertAfter(lastInput.parent('div'));
}
</script>
 <tr id="tr">
        <td class="table_th" >题目选项:        
        <td width="" id="contain">
              <div class='inputs'>
              <input type="text" id="comment" name="comment"
            maxlength="30" style="width: 80%"  placeholder="选项1"/><font
          color="red"> *</font></div>

              <div class='inputs'><input type="text" id="title" name="title"
            maxlength="30" style="width: 80%"" placeholder="选项2" />&nbsp;</div>

              <div class='inputs'><input type="text" id="commentx" name="comment"
            maxlength="30" style="width: 80% " " placeholder="选项3" /><span  onclick=del(this)>删除</span></div>

              <div class='inputs'><input type="text" id="commentx" name="comment"
            maxlength="30" style="width: 80% "  placeholder="选项4" /><span  onclick=del(this)>删除</span></div>

            <div><a href="javascript:;" class="addRow" id="addRow" onclick="javascript:add()">+添加选项</a></div>

            </td>
    </tr>

        <tr>
            <td class="table_th">选择模式:</td>
            <td width="">
            最多<input type="text" id="maxnum" name="maxnum" style="width: 4%"/>项
            </td>
        </tr>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • danielinbiti 2015-07-14 13:44
    已采纳
     <!DOCTYPE html> 
    <html>
    <head> 
        <script src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
    
    </head> 
    <script>
        function del(t){
             $(t).parent('div').remove();
        }
        function add(){
             var val = $('#maxnum').val();
             if(!val){
                  alert('请填写最多项');
                  return;
             }
             var lastInput = $('#contain input:last');
             var phName = lastInput.attr('placeholder');
             phName = phName.replace("选项","");
             phName = parseInt(phName,10)+1;
             if(parseInt(val,10)>=parseInt(phName,10)){
                  $('<div class="inputs"><input input type="text" id="commentx" name="comment" maxlength="30" style="width: 80% "  placeholder="选项'+phName+'" /><span onclick=del(this)>删除</span></div>').insertAfter(lastInput.parent('div'));
             }else{
                 alert('超出了最大项');
             }
        }
    </script>
    <body> 
        最多<input type="text" id='maxnum' name="maxnum" style="width: 4%"/>项
        <table id="table_items" class="hovertable" style="width: 100%;" cellspacing="0"
        cellpadding="0">
        <tr id="tr">
            <td class="table_th" >题目选项:        
            <td width="" id="contain">
                  <div class='inputs'>
                  <input type="text" id="comment" name="comment"
                maxlength="30" style="width: 80%"  placeholder="选项1"/><font
              color="red"> *<span  onclick=del(this)>删除</span></font></div>
                <div><a href="javascript:;" class="addRow" id="addText" onclick="javascript:add()">+添加选项</a></div>
    
                </td>
        </tr>
        </table>
    </body> 
    </html> 
    
    点赞 打赏 评论
  • 逝_去_的_光_阴 2015-07-14 09:53
     placeholder="选项'+(++parseInt(phName))+'"
    

    改一下就行了

     if(phName=='1'){
              phName='2'
         }else if(phName=='2'){
              phName='3'
         }else if(phName=='3'){
              phName='4'
         }else if(phName=='4'){              **_  //这部分如何用数组循环实现_**
              phName='5'
         }else if(phName=='5'){
              phName='6'
         }
            //这一段if判断全删掉
    
    点赞 打赏 评论
  • danielinbiti 2015-07-14 10:03

    ... ...阿拉伯数字的加一就行了,中文的数字得用数组。改用阿拉伯数字就简单。

    点赞 打赏 评论
  • 格斗王 2015-07-14 13:38

    一楼那样的修改应该是可以的。
    1.题目选项: 后面缺少td结尾标签
    2.另外input的id不能总是commentx,要在commentx后面加上数字,以示区别。

     function add(){
         var lastInput = $('#contain input:last');
         var phName = lastInput.attr('placeholder');
         var maxNum = $("#maxnum").val();
             var inputArr= $('#contain').find('input');
             var count=inputArr.length;
             if(count>=maxNum*1){
                 alert("已经达到最多项了。");
                 return false; 
            }
    
         phName = phName.replace("选项","");
    
         $('<div class="inputs"><input input type="text" id="commentx'+(++parseInt(phName))+'" name="comment" maxlength="30" style="width: 80% "  placeholder="选项'+(++parseInt(phName))+'" /><span onclick=del(this)>删除</span></div>').insertAfter(lastInput.parent('div'));
    }
    
    点赞 打赏 评论
  • 获取已存在的总个数就好了。。

    
        function del(t){
            var dv = $(t).parent('div');
            dv.nextAll().find('input').attr('placeholder', function () { return '选项' + (parseInt(this.getAttribute('placeholder').replace('选项', ''), 10) - 1); });//重设后续的选项数字
            dv.remove();
        }
        function add(){
            var lastInput = $('#contain input:last');
            var maxNum = parseInt($("#maxnum").val())||6;//没填写最多默认6
            var nextId = $('#contain div.inputs').length+1;
            if (nextId > maxNum) { alert('超过最大项'+maxNum);return false}
            $('<div class="inputs"><input input type="text" id="commentx" name="comment" maxlength="30" style="width: 80% "  placeholder="选项'+nextId+'" /><span onclick=del(this)>删除</span></div>').insertAfter(lastInput.parent('div'));
        }
    
    点赞 打赏 评论
  • 好的哦 2015-07-15 00:53

    一楼那样的修改应该是可以的。
    1.题目选项: 后面缺少td结尾标签
    2.另外input的id不能总是commentx,要在commentx后面加上数字,以示区别。

    +++++++11111111111111

    点赞 打赏 评论

相关推荐 更多相似问题