JSFiddle - React, Tailwind, and code Playground
HTML
<table id="artikelposition" data-url-singlearticle="/app_dev.php/_ajax/editSingleArticle" class="tableArticleList">
<tr class="OfferPosition trAvailableArticle trAvailableArticleNoneBackground"
id="2445"
data-mbsartikel="STLVMAMÜ4"
data-zusatztext="asdfasdf"
data-artikelid="2445"
data-artikelnummer="890"
data-gewerk="73"
data-anzahlparameter="1"
data-preis="3.12"
data-p1einheitbezeichnung="m²"
data-p1einheit="15.00"
data-p2einheitbezeichnung=""
data-p2einheit="0.00"
data-p3einheitbezeichnung=""
data-p3einheit="0.00"
data-mindermenge=""
data-mindermengenartikel="0"
data-artikel="Tapete entfernen"
data-beschreibung="Tapete an Decke oder Wand bis zu 2 Lagen entfernen Klebereste entfernen, Untergrund reinigen und Bauschutt entsorgen."
data-position="1"
>
<td class="tdArticleNumber">
<span class="spanPositionNummer" >1</span>
</td>
<td>
<span>Tapete entfernen</span>
<br>
<span>Tapete an Decke oder Wand bis zu 2 Lagen entfernen Klebereste entfernen, Untergrund reinigen und Bauschutt entsorgen.</span>
<br>
...
CSS
img.imgPointer {
cursor: pointer;
}
img.imgDisplayNone {
display: none;
}
JavaScript
$( "#artikelposition" )
.on( "click", "img.rowUp", function(e){
var data = getArticleData( $( "#qArticle" ).data( "objektnummer" ), $( this ).closest( "tr" ), "edit" );
switchPosition( data, "up" );
});
$( "#artikelposition" )
.on( "click", "img.rowDown", function(e){
var data = getArticleData( $( "#qArticle" ).data( "objektnummer" ), $( this ).closest( "tr" ), "edit" );
switchPosition( data, "down" );
});
function switchPosition( data, direction )
{
var tableName = "artikelposition";
currentPosition = parseInt( data['position'] );
if( direction == "up" )
{
newPosition = currentPosition - 1;
}
else if( direction == "down" )
{
newPosition = currentPosition + 1;
}
var otherTr = $("tr[data-position='" + newPosition + "']").data("artikelid");
console.log("Angeklicktes Objekt" + data['artikelid'] + " : aktuelle Position " + data['position'] + " : neue Position " + newPosition);
console.log("Anderes Objekt" + $("#" + otherTr).data("artikelid") + " : aktuelle Position " + $("#" + otherTr).data("position") + " : neue Position " + currentPosition);
$( "#" + data['artikelid'] )
.data({
"position": newPosition
});
$( "#" + data['artikelid'] + " td.tdArticleNumber span.spanPositionNummer" )
.html( newPosition );
$( "#" + otherTr )
.data({
"position": currentPosition
});
$( "#" + otherTr + " td.tdArticleNumber span.spanPositionNummer" )
.html( currentPosition );
sortTable( tableName );
}
function getArticleData( objektnummer, tablerow, kind )
{
if( kind == "delete" ) var data = {};
else var data = [];
data['objektnummer'] = objektnummer;
data['artikelnummer'] = tablerow.data( "artikelnummer" );
data['artikel'] = tablerow.data( "artikel" );
data['beschreibung'] = tablerow.data( "beschreibung" );
data['anzahl_parameter'] ...