0

我有一个基本表：

<table>
    <tr>
        <td class="priority-select"><select></select></td>
    </tr>
    <tr>
        <td class="priority-select"><select></select></td>
    </tr>
    <tr>
        <td class="priority-select"><select></select></td>
    </tr>
    <tr>
        <td class="priority-select"><select></select></td>
    </tr>
</table>

对于这些".priority-select select"元素中的每一个，我都需要附加选项标签、索引值和当前索引以及 selected 属性。例子：

<table>
    <tr>
        <td class="priority-select">
           <select>
             <option value="1" selected>1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
           </select>
        </td>
    </tr>
    ............. to n rows
</table>

我正在使用这个片段来做到这一点：

var $selects = $(".select");
  var selCount = $selects.length;
  for(var i=1; i<=selCount; i++){
    $selects.append("<option value='" + i + "'>" + i + "</option>");
  };

我不知道如何开始下一部分，即根据用户所做的选择更新表格行。

即用户在第三行的选择中选择，该行从顺序中删除，设置为第一行，然后所有行都被重新排序和重新索引，这样在下一次选择时用户将能够更改顺序并得到它正确的。这将在选择选项后完成，无需提交任何其他内容。

任何帮助，将不胜感激。

4

1 回答 1

1

您的问题意味着您已经根据索引选择了适当的数字，但我在您的代码中没有看到。你可以这样做：

function renumber() {
    // select the appropriate number for each
    $("select").val(function (i) {
        return i + 1;
    });
}

然后重新排序：

$selects.change(function () {
    var $this = $(this);
    var val = $this.val();
    var $row = $this.closest("tr");
    var $parent = $row.parent();

    $row.detach();
    var $nextRow = $parent.find("tr:eq(" + (val-1) +")");

    if($nextRow.length > 0){
        $nextRow.before($row); 
    } else {
        $parent.append($row);
    }

    renumber();
});

http://jsfiddle.net/BKHcb/1

于 2013-11-01T15:30:32.857 回答