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

Question

抱歉，如果这太基础了。

1. 如果当前行数是 小于用户的需求。
2. 同时，我需要删除 如果当前行数超过用户需要，则增加行数。

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

另外，是否可以调整添加的宽度 <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

我采纳了@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。