重新排序表的特定行答案

【问题标题】：Reorder specific rows of a table重新排序表的特定行
【发布时间】：2015-05-20 06:00:12
【问题描述】：

大家好，提前致谢

这是我的问题。我必须对表格进行排序。一张表总共有 10 行。该表的前 3 行具有固定值。我想根据第一列输入按字母顺序对剩余的 7 行值进行排序。

另一个表具有相同的结构。即表格的第一列具有文本类型的输入。但在这张表中，问题很复杂，即总共有 12 行。前 2 行是固定的。他们不会动。最后一行也是固定的。中间的剩余部分需要根据第一列中的输入再次按字母顺序排序。

我猜第三张桌子是最简单的。没有行是固定的。既不在顶部，也不在底部。并且需要对行进行排序。

我关注的表结构如下

<table>
  <thead>
    <tr>
      <th>Column One Heading</th>
      <th>Column Two Heading</th>
    </tr>
</thead>
<tbody>
  <tr>
    <td> <input type='text' value='A fixed value' id='Heading' /></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='1' />
    </td>
  </tr>
</tbody>
<tfoot>
<tr>
  <td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>

请注意，我不希望重新排序表格行。我只希望前两列中的值在行中重新排序，并且行不移动。这实质上意味着特定行的隐藏值没有改变。

我不知道该怎么做，但我认为正确的方法是获取需要排序为 JSON 数组的行的值。对该数组进行排序，然后用数据填充行。

第一个例子

<table>
  <thead>
    <tr>
      <th>Column One Heading</th>
      <th>Column Two Heading</th>
    </tr>
</thead>
<tbody>
  <tr>

    <td> <input type='text' value='A fixed value' id='Heading1' disabled='disabled' /></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='1' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' value='A fixed value' id='Heading2' disabled='disabled'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='2' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' value='A fixed value' id='Heading3' disabled='disabled'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='3' />
    </td>
  </tr>

<tr>
    <td> <input type='text' id='Heading4'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='4' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading5'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='5' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading6'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='6' />
    </td>
  </tr>

<tr>
    <td> <input type='text' id='Heading7'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='7' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading8'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='8' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading9'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='9' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading10'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='10' />
    </td>
  </tr>


</tbody>
<tfoot>
<tr>
  <td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>

第二个例子

<table>
  <thead>
    <tr>
      <th>Column One Heading</th>
      <th>Column Two Heading</th>
    </tr>
</thead>
<tbody>
  <tr>

    <td> <input type='text' value='A fixed value' id='Heading1' disabled='disabled' /></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='1' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' value='A fixed value' id='Heading2' disabled='disabled'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='2' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' value='A fixed value' id='Heading3' disabled='disabled'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='3' />
    </td>
  </tr>

<tr>
    <td> <input type='text' id='Heading4'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='4' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading5'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='5' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading6'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='6' />
    </td>
  </tr>

<tr>
    <td> <input type='text' id='Heading7'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='7' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading8'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='8' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading9'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='9' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading10' value='A fixed value' disabled='disabled'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='10' />
    </td>
  </tr>


</tbody>
<tfoot>
<tr>
  <td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>

第三个例子

<table>
  <thead>
    <tr>
      <th>Column One Heading</th>
      <th>Column Two Heading</th>
    </tr>
</thead>
<tbody>
  <tr>

    <td> <input type='text' id='Heading1' /></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='1' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading2' /></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='2' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading3'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='3' />
    </td>
  </tr>

<tr>
    <td> <input type='text' id='Heading4'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='4' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading5'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='5' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading6'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='6' />
    </td>
  </tr>

<tr>
    <td> <input type='text' id='Heading7'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='7' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading8'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='8' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading9'/></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='9' />
    </td>
  </tr>

  <tr>
    <td> <input type='text' id='Heading10' /></td>
    <td> 
      <input type='number' value='' id='Amount' />
      <br />
      <input type='hidden' value='10' />
    </td>
  </tr>


</tbody>
<tfoot>
<tr>
  <td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>

【问题讨论】：

你能发布带有示例数据的表格吗
好吧，如果我在这里只发布 1 个表格，它就会超出限制。让我尝试修剪表格并只发布行。
我只添加行，对于问题 1 也只添加 5 行
你也可以把它放在JSFiddle中..
好吧，让我试试。我从未使用过 JSFiddle。但是让我试一试

标签： javascript jquery asp.net

【解决方案1】：

这里有一些真正的快速：

JSFiddle

http://jsfiddle.net/tcy0tmb5/

function sortColumn(staticRowCount, columnToSort) {
    var values = [];
    $('tr').each(function(index, element) {
        if (index > staticRowCount) {
            var td = $(element).find('td').get(columnToSort);
            values.push($(td).find('input').val());
        }
    });

    //Do the sort
    values.sort;

      $('tr').each(function(index, element) {
        if (index > staticRowCount) {
            var val = values.shift();
            //if you want to pull form the other side of the array use pop();
            var td = $(element).find('td').get(columnToSort);
            $(td).find('input').val(val);
        }
    });
}


sortColumn(3, 0);

【讨论】：

我在您提供的网址中的 JSFiddle 中进行了尝试。但这对我不起作用。
加sortColuimn(3,1)

【解决方案2】：

您可以为所有需要排序的元素添加一个特定的类。如果您只想订购第一个元素值，则可以在向元素添加“toBeOrdered”类后使用此代码：

var objs = document.getElementsByClassName("toBeOrdered");
var array = [];
for ( var i = 0 ; i < objs.length ; i++ ) {
    array[i] = objs[i].value;
}
array.sort();
for ( var i = 0 ; i < objs.length ; i++ ) {
     objs[i].value = array[i];
}

【讨论】：

你能在 JSFiddle 上做，然后把链接传给我吗？
这里是小提琴：jsfiddle.net/mpyavkc9（它只改变元素的值，为了切换整个元素，您需要使用诸如bubblesort，quiksort，ecc等算法自己进行排序。和在排序时切换元素和值）
它就像一个魅力！我今天将尝试整合它，希望我不再需要任何帮助。但从 JSFiddle 上的演示来看，它工作正常。我需要在明天结束之前交付这个，所以请保持我的手指交叉！！！我试图投票支持你的解决方案，但我没有资格！！！
有一些问题。我一直在尝试修复它们，但无法这样做。问题 1）如果我只输入 2 个新行并对它们进行排序。行从底部排序。但是，它们应该在固定行之后立即排序。并且仅对第 1 列的值进行排序。相邻的第 2 列值未排序并保持原样。它们还应该根据第 1 列进行排序
它只能正常工作，即当所有行都被填满时第一列被排序