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

#javascript #java #html #user-interface #button

#javascript #java #HTML #пользовательский интерфейс #кнопка

Вопрос:

У меня есть HTML-таблица с несколькими элементами (td-тегами), в каждой строке есть 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=editamp;rowid=<%=absid%>amp;description=<%=item%>amp;serviceName=<%=sub_topic%>amp;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=deleteamp;rowid=<%=absid%>amp;description=<%=item%>amp;serviceName=<%=sub_topic%>amp;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_upamp;rowid=<%=absid%>amp;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_downamp;rowid=<%=absid%>amp;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 для нескольких строк) Меня это не слишком беспокоит, поскольку основной ожидаемый результат заключается в том, чтобы пользовательский интерфейс отображал правильный порядок строк.