1

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

  1. 如果当前行数少于用户的需求，我正在尝试向表中添加行。
  2. 同时，如果当前行数超过用户的需要，我需要删除多余的行。

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

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

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');

    })
});
4

2 回答 2

2

我采用了@B3aT 提出的想法，对其进行了编辑和充实以实现这一点（可在我的 OP 的 jsfiddle 的 fork 中获得：

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 的回答中的描述添加theadand标记。tbodythead 包括前两行，因为第 1 行是选择框，第 2 行是表的实际标题。开始时 tbody 为空。

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

于 2013-02-28T09:06:09.047 回答
2

在这些情况下 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();
}
}
于 2013-02-28T08:29:12.583 回答