Javascript 对表的特定行重新排序_Javascript_Jquery_Asp.net

Javascript 对表的特定行重新排序

javascript jquery asp.net

Javascript 对表的特定行重新排序,javascript,jquery,asp.net,Javascript,Jquery,Asp.net,大家好，提前谢谢这是我的问题。我得整理桌子。一个表总共有10行。表的前3行具有固定值。我想根据第一列输入按字母顺序对剩余的7行值进行排序另一个表具有相同的结构。即表的第一列具有文本类型的输入。但是在这个表中，问题是复杂的，即总共有12行。前两行是固定的。他们不会搬家的。最后一行也是固定的。中间的剩余部分需要根据第一列中的输入再次按字母顺序排序我想第三张桌子是最简单的。没有固定的行。既不在顶部也不在底部。需要对行进行排序我下面的表结构如下 <table> <thead

大家好，提前谢谢

这是我的问题。我得整理桌子。一个表总共有10行。表的前3行具有固定值。我想根据第一列输入按字母顺序对剩余的7行值进行排序

另一个表具有相同的结构。即表的第一列具有文本类型的输入。但是在这个表中，问题是复杂的，即总共有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数组中的行的值。对该数组排序，然后用数据填充行

第一个例子第二个例子第三个例子

下面是一些非常快的事情：

JSFIDLE

您可以向需要排序的所有元素添加特定类。如果只想对第一个元素值进行排序，可以在向元素添加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];
}

你能用示例数据发布表格吗？如果我在这里只发布一个表格，它就超出了限制。让我试着精简表格，只发布行。我只添加行，对于问题1，这也只是5行。你也可以把它放在JSFIDLE中。好的，让我试试。我从未使用过JSFIDLE。但是让我试一下，我在您提供的url中的JSFIDLE中尝试过它。但它对我不起作用。只需添加SortLuimn3，1您可以在JSFIDLE上执行此操作并将链接传递给我吗？这里是FIDLE：它只更改元素的值，用于切换您需要自己使用诸如bubblesort、quiksort、ecc等算法进行排序的整个元素。并在排序时将元素与值一起切换它就像一个符咒！今天我将尝试整合它，希望我不再需要任何帮助。但是从JSFiddle上的演示来看，它工作得很好。我需要在明天的一天结束前把这个交出去，所以我要祈祷！！！我试图投票支持你的解决方案，但我没有资格！！！有一些问题。我一直在试图修复它们，但无法做到这一点。问题1如果我只输入2个新行并对它们进行排序。这些行是从底部排序的。但是，它们应该在固定行之后进行排序。并且只对第1列的值进行排序。相邻的第2列值未排序并保持原样。它们也应该根据第1列进行排序。它只起到很好的作用，即当所有行都被填充时，第一列被排序

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

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

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