jQuery - 如何重新排序表單元素和表格行

Question

對不起，有很多關於jQuery的問題。這是我寫jQuery的第幾天，我還不熟悉它。感謝您迄今爲止的社區幫助。

下面是我的表單的截圖。

上表中的行可以使用「添加課程」按鈕進行添加。單擊添加課程時，將生成另一行，並且表單輸入名稱也會有一個數字軌道。以下是代碼。

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」是一個計數器來跟蹤進入「添加課程」按鈕時，就會創建一個當前行號：第二行選擇的名字將被稱作「 NBScourse2。這個數字將是增量式的（NBSCourse3，NBSCourse4 ...）

我還有一個腳本來選擇「刪除課程」時刪除該行。問題：如果我刪除了一行之間的行（例如，第3行，5行中的行），行的順序將不再遵守（剩餘的1,2,4,5）。這將會是一個問題，因爲我將在稍後收集數據時使用我的表單處理程序，因爲我將有一個隱藏字段，告訴我期望有多少行，但不再提及表單元素（NBSCourse3將會消失）。

是否有一種很好的方法來刷新行的順序，並重命名單個元素以反映正確的數字順序。

我不能使用[]方法，因爲這是在PHP中，而我正在使用經典ASP進行編碼。

Answer 1

你可以使用這樣的事情：

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

這將創建一個帶有幾個元素的錶行，並追加它作爲一個孩子的表格。

Answer 2

下面的代碼按照您所描述的重新排序，請參閱此fiddle作爲一個工作示例。

的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>