2

私はこれらのようないくつかのhtml要素を持っています：

 <table id="myTable"></table>

    <select name="mySelect">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>

    <a href="javascript:void(0)" onclick="addToTable()">Add new</a>

    <script>
    addToTable = function() {
      var selected = $("select[name*='mySelect'] option:selected").val();
      $('#myTable').find('tr').each(function() {
        if ($(this).attr('id')==selected) { 
          alert('Record has already existed!'); return false;
        }
        else $('#myTable').append('<tr id="'+selected+'"><td>'+selected+'</td></tr>');
      });
    }
    </script>

問題は、同じIDを持つ2つのレコード（行）を追加すると、メッセージに警告が表示されましたが、ループを中断する代わりに新しい行を追加し続けたということでした。私はここで何が間違っていましたか？

前もって感謝します。

4

3 に答える 3

2

何をしているの：

for every existing row R
  if R.id == newRow.id
    alert
    break
  else
    add newRow

これにより、そのIDを持つ既存の行の前にある各行にnewRowが追加されます。行[1,2,3,4,5,6,7,8,9]を使用し、行9を追加すると、「すでに存在します」というアラートが表示される前に、その行が8回追加されます。

あなたがすることを意味することは次のとおりです：

exists = false
for every existing row R
  if R.id == newRow.id
    existing = true
    alert
    break

if !exists
  add newRow

JSで同等：

addToTable = function() {
  var selected = $("select[name*='mySelect'] option:selected").val();
  var exists = false;
  $('#myTable').find('tr').each(function() {
    if ($(this).attr('id')==selected) { 
      alert('Record has already existed!');
      exists = true;
      return false;
    }
  });
  if(!exists) {
    $('#favourite_hotels_table').append('<tr id="'+selected+'"><td>'+selected+'</td></tr>');
  }
}
于 2011-08-26T08:19:43.357 に答える
1

よくわかりませんが、他の人と何かが絡んでいる可能性があります。このように試してみてください。

addToTable = function() {
    var selected = $("select[name*='mySelect'] option:selected").val();
    $('#myTable').find('tr').each(function() {
        if ($(this).attr('id') == selected) {
            alert('Record has already existed!');
            return false;
        } else {
          $('#favourite_hotels_table').append('<tr id="' + selected + '"><td>' + selected + '</td></tr>');
        }
    });
}
于 2011-08-26T08:13:54.590 に答える
0

このhttp://jsfiddle.net/gj9eN/1/のフィドルを作成しましたが、コードが正しくないようです。

テーブルに最初の行がない場合、trの.each（）は実行されません。これを確認するためのコードを追加してください。

これはうまく機能しませんか（そして短くなります）：

addToTable = function() {
    var selected = $("select[name*='mySelect'] option:selected").val();

    if ($("#" + selected) == undefined) {
        $('#myTable').append('<tr id="'+selected+'"><td>'+selected+'</td></tr>');
    } else {
        alert('Record already exists!');
    }
}
于 2011-08-26T08:18:04.427 に答える