Как переместить элементы таблицы HTML вверх или вниз с помощью JavaScript и сохранить порядок всех элементов без изменений (т. Е. 1,2,3 ... и т. Д.) В интерфейсе?

Question

У меня есть HTML-таблица с несколькими элементами (тэги), в каждой строке по 4 кнопки: «Редактировать», «Удалить», «Переместить вверх» и «Переместить вниз».Кнопки «Вверх» и «Вниз» иногда ведут себя странно, поскольку их действия могут привести к тому, что несколько строк будут иметь одинаковый «item_order» в базе данных MySQL.Таким образом, при попытке переместить другие строки вверх или вниз, функции не будут работать, как предполагалось, из-за дублирования «item_order» для более чем одной строки.При проверке базы данных я вижу, что во многих строках есть «item_order = 1» или 2 или 5 и т. Д.

Я бы хотел, чтобы кнопки «Вверх» и «Вниз» продолжали обновлять базу данных MySQL (нонадеюсь, в правильном порядке), а также перемещать строки в интерфейсе пользовательского интерфейса, чтобы они отображались в нужном порядке 1,2,3 ... и т. д.

Пожалуйста, будьте терпеливы со мной, потому что яновичок в бизнесе разработки программного обеспечения, и я все еще изучаю вещи.Ниже приведена таблица:

<tr id="tr_<%=String.valueOf(RowCount)%>" onmouseover="showRow(<%=String.valueOf(RowCount)%>)" onmouseout="hideRow(<%=String.valueOf(RowCount)%>)">
     <td valign="top" width="200px" class="tablepad tableborder_bottom">(<%=String.valueOf(RowCount)%>) <%=topic%></td>
     <td valign="top" width="200px" class="tableborder_left"><%=sub_topic%></td>
     <td valign="top" width="280px" class="tableborder_left"><%=item%></td>
     <td valign="top" class="tableborder_left"><a href="ad_summary.jsp?action=edit&rowid=<%=absid%>&description=<%=item%>&serviceName=<%=sub_topic%>&mainHeading=<%=topic%>" target="_top"><img src="./media/images/edit.jpeg" border="0"/></a></td>
     <td valign="top" class="tableborder_bottom"><a href="ad_summary.jsp?action=delete&rowid=<%=absid%>&description=<%=item%>&serviceName=<%=sub_topic%>&mainHeading=<%=topic%>" target="_top"><img src="./media/images/delete.jpeg" border="0"/></a></td>
     <td valign="top" class="tableborder_bottom"><a href="ad_summary.jsp?action=move_up&rowid=<%=absid%>&itemOrder=<%=item_order%>" target="_top"><img src="./media/images/16_arrow_up.png" border="0"/></a></td>
     <td valign="top" class="tableborder_bottom"><a href="ad_summary.jsp?action=move_down&rowid=<%=absid%>&itemOrder=<%=item_order%>" target="_top"><img src="./media/images/16_arrow_down.png" border="0"/></a></td>
     </tr>

Вот код Java для обновления базы данных MySQL, когда используется кнопка «move_up» или «move_down»:

if (action.equals("move_up")){
  action="add";

  if (whichOrder != 1){
    int CurrentOrder = whichOrder;
    int NewOrder = whichOrder - 1;
    String sqlString1 = "UPDATE msr_summary_notices set item_order = "+String.valueOf(NewOrder)+" WHERE item_order = "+String.valueOf(CurrentOrder);
    String sqlString2 = "UPDATE msr_summary_notices set item_order = "+String.valueOf(CurrentOrder)+" WHERE item_order = "+String.valueOf(NewOrder)+" AND absid <>"+rowid;
    statement1 = conn.prepareStatement(sqlString1);
    int RowsAffected1 = (statement1.executeUpdate());
    statement1.close();
    statement2 = conn.prepareStatement(sqlString2);
    int RowsAffected2 = (statement2.executeUpdate());
    statement2.close();
  }else{
    // Do nothing coz you can move up above 1  
  }
}

if (action.equals("move_down")){
  action="add";

  if (whichOrder != MaxValue){
    int CurrentOrder = whichOrder;
    int NewOrder = whichOrder + 1;
    String sqlString1 = "UPDATE msr_summary_notices set item_order = "+String.valueOf(NewOrder)+" WHERE item_order = "+String.valueOf(CurrentOrder);
    String sqlString2 = "UPDATE msr_summary_notices set item_order = "+String.valueOf(CurrentOrder)+" WHERE item_order = "+String.valueOf(NewOrder)+" AND absid <>"+rowid;
    statement1 = conn.prepareStatement(sqlString1);
    int RowsAffected1 = (statement1.executeUpdate());
    statement1.close();
    statement2 = conn.prepareStatement(sqlString2);
    int RowsAffected2 = (statement2.executeUpdate());
    statement2.close();
  }else{
    // Do nothing coz you can move down below MaxValue  

  }
}

Наконец, вотФункция JavaScript, которая показывает / скрывает строки при наведении мыши, и функция распечатки строк:

<script type="text/javascript">

function showRow(RowId){

 var Row = document.getElementById("tr_"+RowId);
 Row.style.backgroundColor="#CCCCFF";
 //console.debug(Row);

}
function hideRow(RowId){

     var Row = document.getElementById("tr_"+RowId);
     Row.style.backgroundColor="#FFFFFF";

}


 if ((action.equals("move_up"))||(action.equals("move_down"))){ 
     out.println("showRow("+rowid+")");
    //console.log(RowId);
}


</script>

</head>

Я провел много исследований и думаю, что проблема может быть в сеансе, который может быть плохо обработан.Кроме того, если «item_order» в БД остается грязным (один и тот же item_order для нескольких строк), я не слишком обеспокоен этим, поскольку основной ожидаемый результат для пользовательского интерфейса, чтобы показать правильный порядок строк.