1

申し訳ありませんが、これが基本的すぎる場合。

  1. 現在の行数がユーザーの要求より少ない場合、テーブルに行を追加しようとしています。
  2. 同時に、現在の行数がユーザーのニーズを超えている場合は、余分な行を削除する必要があります。

私のコードは機能していますが、あまり意味がないと思います。ですから、誰かが私の間違いを訂正して、私のコードをより合理的にすることができるかどうか疑問に思っています。（この追加または削除アクティビティを制御するために2つのインデックスを使用しようとしました。1つのインデックスは現在存在する要素をチェックし、ユーザーの新しい入力の違いを取得します。次に、追加または削除の動きを実行します。しかし、これを実行できませんでした。）

また、追加の幅を<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

このような状況で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 に答える
2

私は@B3aTによって提示されたアイデアを採用し、編集し、これを作成するために具体化しました（OPの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行1は選択ボックスであり、行2はテーブルの実際のヘッダーであるため、theadには最初の2行が含まれます。tbodyは空です。

個々の行のスタイルを変更する場合（列幅の調整など）は、テーブルを使用しない方がよいでしょう。テーブルのような動作は、列スタイルで使用するのと同じくらい簡単で、各行の最後にfloat:leftdivを配置するようにしてください。clear:both

于 2013-02-28T09:06:09.047 に答える