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>