Question

很抱歉有很多关于jQuery的问题。这是我写jQuery的前几天，我仍然不熟悉它。感谢社区＆＃39;到目前为止帮助。

这是我表单的截图。

DynamicForm

可以使用＆＃34;添加课程＆＃34;添加上表的行。按钮。单击“添加课程”时，将生成另一行，并且表单输入名称也将具有数字轨道。以下是代码。

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++;

}

＆＃34; counterforappending＆＃34;是一个计数器，用于跟踪当＆＃34;添加课程＆＃34;时将创建的当前行号。输入按钮：第二行＆＃39;选择名称将被称为“NBScourse2”。这个数字将是增量的（NBSCourse3，NBSCourse4 ......）

我还有一个脚本可以删除＆＃34;删除课程＆＃34;被选中。问题：如果我删除其中的一行（例如，第3行，第5行），则行的顺序将不再跟随（剩余1,2,4,5）。当我稍后使用我的表单处理程序收集数据时，这将是一个问题，因为我将有一个隐藏字段告诉我期望有多少行，但不再引用表单元素（NBSCourse3将会消失。）

是否有一种刷新行序列的好方法，并重命名单个元素以反映正确的数字序列。

我无法使用[]方法，因为PHP中有这种方法，我在经典ASP中进行编码。

Answer 1

下面的代码按照您的描述重新排序，请参阅此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>

Answer 2

你可以使用这样的东西：

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

这将创建一个包含几个元素的表格行，并将其作为子项附加到表格中。

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

2 个答案: