1

jQueryについて多くの質問をしてすみません。jQueryを作成するのは最初の数日ですが、まだ慣れていません。これまでのコミュニティの支援に感謝します。

これが私のフォームのスクリーンショットです。

DynamicForm

上記の表の行は、[コースの追加]ボタンを使用して追加できます。[コースの追加]をクリックすると、別の行が生成され、フォームの入力名にも番号トラックが表示されます。以下はコードです。

var counterforappending = 1;
var counterforajax = 1;

function addARNBSCourseRow()        
   tablerow = "<tr>";
   tablerow += "<td><select name='NBSCourse" + counterforappending + "'></select></td>";
   tablerow += "<td><select name='NBSCourseType" + counterforappending + "'><option value='Core' selected='selected'>Core</option>";
  //Other codes...
  </select></td>";
   tablerow += "<td><select name='NBSIndexNo" + counterforappending + "' class='IndexNo'></select></td>";


//--Other Codes--
counterforappending++;

}

「counterforappending」は、「AddCourse」ボタンが入力されたときに作成される現在の行番号を追跡するためのカウンターです。2番目の行の選択名は「NBScourse2」と呼ばれます。数は増分になります（NBSCourse3、NBSCourse4 ...）

「コースの削除」を選択したときに行を削除するスクリプトもあります。問題：間にある行を削除すると（たとえば、5行のうち行3）、行のシーケンスが続きません（残りの1、2、4、5）。これは、後でフォームハンドラーを使用してデータを収集するときに問題になります。これは、予想される行数を示す非表示フィールドがありますが、フォーム要素への参照がなくなったためです（NBSCourse3はなくなります）。

行のシーケンスを更新し、正しい番号シーケンスを反映するように個々の要素の名前を変更する良い方法はありますか？

[]メソッドはPHPであり、Classic ASPでコーディングしているため、使用できません。

4

2 に答える 2

1

以下のコードは、説明したように再シーケンスします。実際の例については、このフィドルを参照してください。

Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">     
$(document).ready(function () {     
$('.button_remove').click(function() {
    var index = 0;
    var currentName = $(this).attr('name');
    var currentId = getCurrentIdFromName(currentName);

    $('#' + currentId).remove();

    $('#courseTable').find('tr').each(function() {
        $(this).each(function() {
            var currentTRId = $(this).attr('id');
            $('#' + currentTRId + ' :input').each(function() {
                var name = $(this).attr('name');
                var id = getCurrentIdFromName(name);
                var text = name.replace(id,'');
                $(this).attr('name', text + index);             
            });
        });

        $(this).attr('id',index);
        index++;
    });
});
}); 

function getCurrentIdFromName(name) {
var id = name.match(/\d/g);
return id[0];
}
</script>

もちろん、HTML は次のようにする必要があります。

<table id="courseTable" border="1" cellpadding="0" cellspacing="0">
<tr id="0" class="header">
    <td>Course Code</td>
    <td>Course Type</td>
    <td>Index No</td>
    <td>Class Details</td>
    <td></td>
</tr>
<tr id="1">
    <td>
        <select name="NBSCourse1">
            <option selected='selected'>Select Course ID</option>           
            <option value="First">First</option>
            <option value="Second">Second</option>
            <option value="Third">Third</option>
        </select>
    </td>
    <td>
        <select name="NBSCourseType1">
            <option selected='selected'>Core</option>           
            <option value="First">First</option>
            <option value="Second">Second</option>
            <option value="Third">Third</option>
        </select>
    </td>
    <td>
        <select name="'NBSIndexNo1">
            <option selected='selected'></option>           
            <option value="First">1</option>
            <option value="Second">2</option>
            <option value="Third">3</option>
        </select>
    </td>
    <td></td>
    <td>
        <input type="submit" value="Remove Course" name="btnRemove1" class="button_remove" />
    </td>
</tr>
<tr id="2">
    <td>
        <select name="NBSCourse2">
            <option selected="selected">Select Course ID</option>           
            <option value="First">First</option>
            <option value="Second">Second</option>
            <option value="Third">Third</option>
        </select>
    </td>
    <td>
        <select name="NBSCourseType2">
            <option selected="selected">Core</option>           
            <option value="First">First</option>
            <option value="Second">Second</option>
            <option value="Third">Third</option>
        </select>
    </td>
    <td>
        <select name="NBSIndexNo2">
            <option selected="selected"></option>           
            <option value="First">1</option>
            <option value="Second">2</option>
            <option value="Third">3</option>
        </select>
    </td>
    <td></td>
    <td>
        <input type="submit" value="Remove Course" name="btnRemove2" class="button_remove" />
    </td>
</tr>
<tr id="3">
    <td>
        <select name="NBSCourse3">
            <option selected='selected'>Select Course ID</option>           
            <option value="First">First</option>
            <option value="Second">Second</option>
            <option value="Third">Third</option>
        </select>
    </td>
    <td>
        <select name="NBSCourseType3">
            <option selected='selected'>Core</option>           
            <option value="First">First</option>
            <option value="Second">Second</option>
            <option value="Third">Third</option>
        </select>
    </td>
    <td>
        <select name="NBSIndexNo3">
            <option selected='selected'></option>           
            <option value="First">1</option>
            <option value="Second">2</option>
            <option value="Third">3</option>
        </select>
    </td>
    <td></td>
    <td>
        <input type="submit" value="Remove Course" name="btnRemove3" class="button_remove" />
    </td>
</tr>
</table>
于 2012-06-21T13:23:10.047 に答える
0

次のようなものを使用できます。

var el = "<tr><td>td1</td><td>td2</td></td>"
$(table).appendChild(el);

これにより、いくつかの要素を持つテーブル行が作成され、それが子としてテーブルに追加されます。

于 2012-06-19T22:01:03.193 に答える