0

这是我的代码

<table id="cont">    
<tr>
<td><input type="text" name="no" id="no"/></td>
<td><input type="text" name="qty" id="qty"/></td>
</tr>
</table>

这是我的 jQuery 代码

$(document).ready(function() {
     var no="";
     $('#no').keyup(function(){
     no = $("#no").val();
     for(var i=1; i<no; i++)
     {
        ++j;

        $('<tr class="field"><td></td><td><input name="qty[]" type="text" id="qty[0]" /></td></tr>').fadeIn('slow').appendTo('#cont');
     }
     });

    if(i==1)
    {
        $('.field').remove();
    }

});

我想根据输入字段（无 id）动态创建和删除行，它可以正常工作到 19，但如果我输入 20，那么它会创建 20 和额外的 1 行以及我从 20 中删除零，那么它应该被保留2 行，但它显示所有行（21）。

我该如何解决它，请任何帮助？

4

4 回答 4

2

您的代码的主要问题是您只添加行。这是一个解决方案，它在 keyup 后提供一点超时，然后替换所有行。尚不完全清楚您使用此 UI 的总体目标是什么。

请注意，顶行被包裹<thead>并<tbody>用于数据行：

var row = '<tr class="field"><td>Row text</td><td><input name="qty[]" type="text" /></td></tr>';
var num_rows=0;
$('#no').keyup(function () {
   num_rows= $(this).val();;
    if (!isNaN(num_rows)) {/* make sure is a number, can add extra condition to limit number*/
        setTimeout(createRows, 300);/* slight delay to give user time to type*/
    } else {
        alert('numbers only please')
    }
});

function createRows(){
    var rowHtml='';
    for ( i=0;i<num_rows;i++){
        rowHtml+=row;
    }
    $('#cont tbody').html( rowHtml)

}

演示：http: //jsfiddle.net/H4MHs/

编辑：我怀疑这种方法与您真正想要的完全不同，但遵循您的方法。由于从未明确说明目标，因此我们只能继续

于 2013-03-30T17:52:33.390 回答
0

parseInt在循环中使用之前，您可能希望将字段中的值转换为整数。

我很确定 jQuery.val()总是会返回一个字符串。

于 2013-03-30T17:28:52.137 回答
0

我觉得这就是你需要的：

html:

Number of field:<div id='nbElem'></div>
<table id="cont">    
 <tr>
  <td><input type="text" name="no" id="no"/></td>
  <td id='field'></td>
 </tr>
</table>

JS：

$('#no').keyup(function(){
    var $val = parseInt($(this).val(),10);
    var $nbQtity = $('.qtity').length;

    if($val <= $nbQtity){
        for(var i = $val; i < $nbQtity; i++){
            $('#q_'+i).remove();
        }
    }else{
        for(var i = $nbQtity; i < $val; i++){
         $('<input name="qty[]" class="qtity"'
           +' type="text" id="q_'+i+'" />')
             .fadeIn('slow')
             .appendTo('#field');
        }
    }
    $('#nbElem').text($val);
});

http://jsfiddle.net/pYtbs/

于 2013-03-30T17:52:24.200 回答
0

这是添加行的最简单和最简单的方法

<table id="options-table">
<tbody>
    <tr>
        <td>Input-Box-One</td>
        <td>Input-Box-Two</td>
        <td></td>
    </tr>
    <tr>
        <td><input type="text" name="input_box_one[]" /></td>
        <td><input type="text" name="input_box_one[]" /></td>
        <td><input class="del" type="button" value="Delete" /></td>
    </tr>
    <tr>
        <td><input type="text" name="input_box_one[]" /></td>
        <td><input type="text" name="input_box_one[]" /></td>
        <td><input class="add" type="button" value="Add More" /></td>
    </tr>
</tbody>

如果我们想要更多行，那么我们必须向表中添加新行。将此代码放入脚本中

$('.add').live('click',function(){
$(this).val('Delete');
$(this).attr('class','del');

var appendTxt = "<tr><td><input type="text" name="input_box_one[]" /></td><td><input type="text" name="input_box_two[]" /></td><td><input class="add" type="button" value="Add More" /></td></tr>";
$("tr:last").after(appendTxt); });

从表中删除一行。

$('.del').live('click',function(){
$(this).parent().parent().remove(); });
于 2013-04-30T09:15:15.097 回答