1

抱歉，关于 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 中，而我正在使用 Classic ASP 进行编码。

4

2 回答 2

1

如您所描述的，下面的代码重新排序，请参阅this 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>
于 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 回答