抱歉,如果这太基础了。


我正在尝试将行添加到表中,如果当前行数是
小于用户的需求。
同时,我需要删除
如果当前行数超出用户需要,则增加行数。


我的代码正在运行,但是我认为这没有任何意义。因此,我想知道是否有人可以纠正我的错误并使我的代码更合理。 (我试图使用两个索引来控制此添加或删除活动。一个索引检查当前存在的元素,并获取用户新输入之间的差。然后执行添加或删除移动。但是,我做不到。)

另外,可以在不更改<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');

    })
});

最佳答案

我接受了@ 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的答案中所述添加theadtbody标记。 Thead包括前两行,因为第1行是选择框,第2行是表的实际标题。 tbody是空的开始。

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

10-05 20:53
查看更多