重新排序表的特定行

Question

大家好，并提前致谢

这是我的问题。我必须排序表。一张表总共有10行。该表的3个顶行具有固定值。我想在第一列输入的基础上按字母顺序对剩余的7行值进行排序。

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

我认为第三个表格最简单。没有行被修复。无论是在顶部还是在底部。行需要排序。

我所遵循的表格结构如下

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

Answer 1

真正快速的事情：

<强>的jsfiddle

http://jsfiddle.net/tcy0tmb5/

<强> JS

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

Answer 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];
}