Question

对不起，如果这太基础了。

如果当前行数是，我正在尝试向表中添加行少于用户的需求。
同时，我需要删除如果当前行数超过用户需要，则为额外行。

我的代码正在运行，但我认为它没有多大意义。所以我想知道是否有人能纠正我的错误并使我的代码更合理。（我试图使用两个索引来控制这个添加或删除活动。一个索引检查当前存在的元素并获得用户新输入之间的差异。然后执行添加或删除移动。但我没有这样做。）

此外，是否可以在不更改<td>的情况下调整已添加shape of the first table row?的宽度感谢您的帮助！这是demo。

HTML

<form method="post" id="form1" action=index.html>
    <table class="tab tab_Application" border="0">
        <tr>
            <th>
                <label for="id_noa">Number of Applications:</label>
            </th>
            <td>
                <select name="noa" id="id_noa">
                    <option value="">Make a selection</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </td>
        </tr>
        <tr id='noa_header' style="display:none">
            <th>App#</th>
            <th>Month</th>
            <th>Day</th>
            <th>Mass Applied (kg/hA)</th>
            <th>Slow Release (1/day)</th>
        </tr>
    </table>
</form>

JS

$(document).ready(function () {
    var i = 1
    $('#id_noa').change(function () {
        var total = $(this).val()
        $('#noa_header').show()

    //I was trying to use two indices to control this add or remove activity. One index check the current existed elements and get the difference between user's new input. Then do the add or remove movements. But I failed to do this.

        while (i <= total) {
            $('.tab_Application').append('<tr class="tab_noa1"><td><input type="text" size="5" value="' + i + '"/></td><td><input type="text" size="5" name="mm' + i + '" id="id_mm' + i + '""/></td><td><input type="text" size="5" name="dd' + i + '" id="id_dd' + i + '""/></td><td><input type="text" size="5" name="ma' + i + '" id="id_ma' + i + '""/></td><td><input type="text" size="5" name="sr' + i + '" id="id_sr' + i + '" value="0""/></td></tr>');
            i = i + 1;
        }
        while (i-1 > total) {
            $(".tab_Application tr:last").remove();
            i=i-1
        }

        $('</table>').appendTo('.tab_Application');

    })
});

Answer 1

在这些情况下，jQuery擅长，让我们玩各种选择器。首先，您需要分隔表格的标题和正文（thead和tbody）。（未经过测试的代码）。

function refresh(new_count) {
//how many applications we have drawed now ?
var old_count = parseInt($('tbody').children().count());
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
//if we have rows to add
if (rows_difference > 0)
{
    //$('tbody').append() or prepend() new empty rows based on your pattern with a loop
}
else if (rows_difference < 0)//we need to remove rows ..
{
    var index_start = old_count - rows_difference;//for the LAST X rows
    $('tr:gt('+index_start+')').remove();
}
}

Answer 2

我接受了@ B3aT提出的想法，编辑并充实了这些想法（可在my fork of OP's jsfiddle获得：

var row_i = 0;

function emptyRow() {
  row_i++;
  this.obj = $("<tr></tr>");
  this.obj.append('<td><input type="text" size="5" value="' + row_i + '"/></td>');
  this.obj.append('<td><input type="text" size="5" name="mm' + row_i + '" id="id_mm' + row_i + '""/></td>');
  this.obj.append('<td><input type="text" size="5" name="dd' + row_i + '" id="id_dd' + row_i + '""/></td>');
  this.obj.append('<td><input type="text" size="5" name="ma' + row_i + '" id="id_ma' + row_i + '""/></td>');
  this.obj.append('<td><input type="text" size="5" name="sr' + row_i + '" id="id_sr' + row_i + '" value="0""/></td>');
}

function refresh(new_count) {
  if(new_count > 0) {
    $("#noa_header").show();
  }
  else {
    $("#noa_header").hide();
  }
  var old_count = parseInt($('tbody').children().length);

  var rows_difference = parseInt(new_count) - old_count;

  if (rows_difference > 0)
  {
     for(var i = 0; i < rows_difference; i++)
        $('tbody').append((new emptyRow()).obj);
  }
  else if (rows_difference < 0)//we need to remove rows ..
  {
     var index_start = old_count + rows_difference + 1;          
     $('tr:gt('+index_start+')').remove();
     row_i += rows_difference;
  }
}

$(document).ready(function () {
    $('#id_noa').change(function () {
        refresh( $(this).val() );
    })
});

emptyRow函数如此长的原因是我想让列的数量易于操作。每个列都单独附加，因此更改默认模式很简单。

在html中，我必须按照@ B3aT的回答中所述添加thead和tbody标记。 thead包括前两行，因为第1行是选择框，第2行是表的实际标题。 tbody开始是空的。

就改变各行的样式（如调整列宽）而言，最好不要使用表格。类似于表格的行为可以像在列样式中使用float:left一样简单，确保在每行的末尾放置一个clear:both的div。

jQuery根据输入添加或删除表行

HTML

JS

2 个答案: