0 
<a class="checkModelButton" href="check.php">Check</a>
<div id="model_list"></div>

jquery と関数 deleteRow() を含めます。

jQuery('.checkModelButton').click(function(event){
   event.preventDefault();
   var url = jQuery(this).attr('href');
   jQuery.ajax({
         type: 'get',
         cache: false,
         url: url,
         success: function(html){
             jQuery('#model_list').html(html);
         }
   });
});
function deleteRow(id) {
    try {
        var table = document.getElementById('model_list');
        var rowCount = table.rows.length;
        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        } 
        jQuery("input[type=checkbox]:checked").each(function() { 
            jQuery(this).parents("tr").remove(); 
        });    

    } catch(e) {
        alert(e);
    }
}

check.php では、html は次のように返されます。

<input type="button" value="Delete Row" onclick="deleteRow('model_list')" />
<table id="model_list">
   <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
      </tr>
   </thead> 
   <tbody>
      <tr>
        <td><input type="checkbox" value="1" name="model_id[]" class="item"></td>
        <td>Nokia N71</td>
      </tr>
   </tbody>
</table>

ajaxをロードした後、フォーム入力をチェックして[行の削除]ボタンをクリックしましたが、エラーでこの行を削除できませんそしてエラーはalert(Table model_list is empty)、それを修正する方法ですか?

4

1 に答える 1

2

jQuery は、私たちにとって選択プロセスを非常に単純化し、JavaScript では try/catch ブロックなしでは提供されない多くのフェイルセーフも提供してくれました。すでに jQuery を使用しているので、次のようにして deleteRow() 関数を単純化できます。

function deleteRow(id) {   // the id variable is unnecessary and can be removed
    // Grab all the rows in the table (the > sign targets the elements directly inside the current one (not cascading)
    var rows = jQuery("#model_list > tbody > tr");
    // Iterate through the rows
    jQuery(rows).each(function(key, value) {
        // Look inside each row for a checked checkbox
        if (jQuery(this).find("input:checkbox[checked='checked']").length > 0) {
            // If one is found, then remove the whole row (jQuery(this) refers to the current row
            jQuery(this).remove();
        }
    });
}

上記の例を機能させるために、同じファイルに一時テーブルを作成しました。表の行にデータを動的にロードしているため、これは以下の静的サンプルのように機能するはずです。

<input type="button" value="Delete Row" onclick="deleteRow('model_list')" />
<table id="model_list">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>
    </thead> 
    <tbody>
        <tr>
            <td><input type="checkbox" value="1" name="model_id[]" class="item"></td>
            <td>Nokia N71</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="2" name="model_id[]" class="item"></td>
            <td>Nokia N72</td>
        </tr>
        <tr>
            <td><input type="checkbox" value="3" name="model_id[]" class="item"></td>
            <td>Nokia N73</td>
        </tr>
    </tbody>
</table>

これが役立つかどうか、または他に質問がある場合はお知らせください。:)

于 2012-07-28T04:23:59.703 に答える