1

次のJavaScript関数がいくつかあります。

  • テーブル行の表示/非表示
  • 新しい行を追加

どちらも同じページで機能しますが、特定の状況下では機能しません。

以下のコードのフィドルは次のとおりです。

/*************** show/hide sections ***************/
$('.arrow').click(function(event) {
    var sec_id = $(this).attr('id').split('.')[0];  // admin.link -> admin

    if ($(this).closest('td').attr('class') == 'subtitle')
        $('.s_'+sec_id).toggle();                   // toggle hide/show for 1 item (section)
    else
        $(this).closest('tr').nextUntil('tr:not(.s_' + sec_id+')').toggle();

});

/*************** Add rows ***************/
$('.add_row').click(function(event) {
    var sid = $(this).attr('sid');                  // the id of the <tbody>
    var tbody = document.getElementById(sid);   // the <tbody> to add rows to

    // === GENERATE NEW NAMES for inputs
    // get the name of the first input in the last row
    var rows = tbody.rows;
    var rowinput = rows[rows.length-1].getElementsByTagName('INPUT');
    // split name into array
    var name_piece = rowinput[0].name.split('][');
    // create name for next row; check if last row is a blank row
    var reg = new RegExp('^[0-9]+$');
    if (reg.test(name_piece[1]))    // if integer
        var iteration = parseInt(name_piece[1], 10) + 1;    // convert to int with base 10
    else
        iteration = 1;
    if (iteration < 10)
        iteration = '0'+iteration;                  // add left padding to ensure sort order
    var front = 'items['+sid.substring(2)+']['+iteration+']';   // front of input name (remove the 's_' from name)
    // END GENERATE NEW NAMES for inputs

    // === CREATE ROW
    var row = document.createElement('tr');         // create a row
    var td1 = document.createElement('td');         // create first cell
    td1.setAttribute('colSpan', 2);
    td1.innerHTML = '<input type="text" name="'+front+'[desc]" maxlength="100" />';
    var td2 = document.createElement('td');         // create second cell
    td2.innerHTML = '<input type="text" name="'+front+'[price]" maxlength="9" onChange="calc_ttl()" class="right small" />';
    var td3 = document.createElement('td');         // create third cell
    td3.setAttribute('colSpan', 3);
    // END CREATE ROW

    // output
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    tbody.appendChild(row);
});

フィドルに 3 つのリンクが表示されますが、これらはすべて正常に機能します。唯一の例外は、非表示の行が表示されている間に行を追加した場合です。例えば。：

  1. 「サブセクション」をクリックして行を表示します
  2. 「行を追加」をクリック
  3. 「サブセクション」をクリックして行を非表示 <--ここで失敗

それ以降、ページをリロードしない限り、「サブセクション」リンクは機能しなくなります。コードはチェックアウトされ、Firebug はエラーを報告しないので、途方に暮れています。アドバイスをいただければ幸いです。

4

1 に答える 1

1

問題は、ここに投稿した jQuery コードにはありません。それはHTMLにあります。あなたのフィドルには次のものがあります：

<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" class="s_grp_2d_ttl_asset" style="display: none;">

行が表示されると、マウスがその上に移動するとすぐに、s_grp_2d_ttl_assetクラスがクラスに置き換えられ、highlightクリック イベントが最初の要素で停止します。代わりに addClass、removeClass、または toggleClass 関数を使用した場合、元のクラスを完全に削除せずに変更を加えることができます。

于 2013-07-11T08:28:36.380 に答える