JS implements a list that contains functions such as move up and move down and delete, while js moves down

JS implements a list that contains functions such as move up and move down and delete, while js moves down

Recently, I made a project that includes a list page. For the user experience, operations are implemented using JS, including the functions of moving up, moving down, and deleting in the list, front-end JS, the backend data is modified using AJAX. This article mainly describes the front-end JS section.

Take a look at

Let's take a look at its HTML structure. Of course, this is related to the front-end cut graph. The back-end program staff is only responsible for writing their own JS. I will take our project as an example and take a look at the HTML

<Ul class = "clearfix"> <li class = "courseList"> <div class = "titDefault clearfix"> <div class = "left clearfix"> <span class = "dragBtn "> </span> <span class =" tit "> content <em class =" contIndex "> 1 </em>: </span> <em title = "add-on-April .txt" class = "titDefaultName"> Add-on-April .txt </em> </div> <div class = "mid"> 2013 9:54:00 </ div> <div class = "right clearfix"> <a value = "253040" class = "moveUpBtn" href = "javascript :; "> <span class =" delTit "> move up </span> </a> <a value =" 253040 "class =" moveDownBtn "href =" javascript :; "> <span class =" delTit "> move down </span> </a> <a value =" 253040 "class =" deleteBtn "href =" javascript :; "> <span class =" delTit "> Delete </span> </a> </div> </li> <li class =" courseList "> <div class = "titDefault clearfix"> <div class = "left clearfix"> <span class = "dragBtn"> </span> <span class = "tit"> content <em class = "contIndex"> 2 </em>: </span> <em title = "use description .txt" class = "titDefaultName"> Use description .txt </em> </div> <div class = "mid"> 9:54:00 </div> <div class = "right clearfix"> <a value = "253041" class = "moveUpBtn" href = "javascript :; "> <span class =" delTit "> move up </span> </a> <a value =" 253041 "class =" moveDownBtn "href =" javascript :; "> <span class =" delTit "> move down </span> </a> <a value =" 253041 "class =" deleteBtn "href =" javascript :; "> <span class =" delTit "> Delete </span> </a> </div> </li> <li class =" courseList "> <div class = "titDefault clearfix"> <div class = "left clearfix"> <span class = "dragBtn"> </span> <span class = "tit"> content <em class = "contIndex"> 3 </em>: </span> <em title = ".txt" class = "titDefaultName"> .txt </em> </div> <div class = "mid"> 9:54:00 </div> <div class = "right clearfix"> <a value = "253040" class = "moveUpBtn" href = "javascript :; "> <span class =" delTit "> move up </span> </a> <a value =" 253040 "class =" moveDownBtn "href =" javascript :; "> <span class =" delTit "> move down </span> </a> <a value =" 253040 "class =" deleteBtn "href =" javascript :; "> <span class =" delTit "> Delete </span> </a> </div> </li> <li class =" courseList "> <div class = "titDefault clearfix"> <div class = "left clearfix"> <span class = "dragBtn"> </span> <span class = "tit"> content <em class = "contIndex"> 4 </em>: </span> <em title = "sorting question .txt" class = "titDefaultName"> sorting question .txt </em> </div> <div class = "mid"> 9:54:00 </div> <div class = "right clearfix"> <a value = "253041" class = "moveUpBtn" href = "javascript :; "> <span class =" delTit "> move up </span> </a> <a value =" 253041 "class =" moveDownBtn "href =" javascript :; "> <span class =" delTit "> move down </span> </a> <a value =" 253041 "class =" deleteBtn "href =" javascript :; "> <span class =" delTit "> Delete </span> </a> </div> </li> </ul>

Next, let's take a look at the JS Code, mainly implemented using the JQ on method, because the list data is static for the first time (bind). After sorting, the data changes to dynamic (live). Therefore, this structure can only be used on. Let's take a look at the code.

<Script type = "text/ecmascript"> $ (function () {// move up $ (". clearfix "). on ("click ",". moveUpBtn ", function () {var self = $ (this); var _ old = self. closest ("li. courseList "); var _ new = self. closest ("li. courseList "). prev ("li"); if (_ new. length> 0) {var _ temp = _old.html(1_1__old.empty().append(_new.html (); _ new. empty (). append (_ temp) ;}}); // move down $ (". clearfix "). on ("click ",". moveDownBtn ", function () {var self = $ (this); var _ old = self. closest ("li. courseList "); var _ new = self. closest ("li. courseList "). next ("li"); if (_ new. length> 0) {var _ temp = _old.html(1_1__old.empty().append(_new.html (); _ new. empty (). append (_ temp) ;}}); // Delete $ (". clearfix "). on ("click ",". deleteBtn ", function () {var self = $ (this); // The source object self of the current click event. closest ("li. courseList "). remove () ;}); </script>

After running the SDK, the result is displayed. In this JS, the AJAX Method for interacting with the background is not written. You can decide based on the actual situation.

Js table sorting move up and down

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> test.html </title>
<Script type = "text/javascript">
Function up (obj ){
Var tr = obj. parentNode. parentNode;
Var tbody = tr. parentNode;
Var tb = tbody. parentNode;
Var rowIdx = 0;
For (var I = 0; I <tb. rows. length; I ++ ){
If (tb. rows [I] = tr ){
RowIdx = I;
Break;
}
}
If (rowIdx = 1) return;
Var preTr = tb. rows [rowIdx-1];
Var nextNextObj = tr. nextSibling;
Tbody. removeChild (preTr );
If (nextNextObj) tbody. insertBefore (preTr, nextNextObj );
Else tbody. appendChild (preTr );
}
Function down (obj ){
Var tr = obj. parentNode. parentNode;
Var tbody = tr. parentNode;
Var tb = tbody. parentNode;
Var rowIdx = 0;
For (var I = 0; I <tb. rows. length; I ++ ){
If (tb. rows [I] = tr ){
RowIdx = I;
Break;
}
}
If (rowIdx = tb. rows. length-1) return;
Var nextTr = tb. rows [rowIdx + 1];
Var nextNextObj = nextTr. nextSibling;
Tbody. removeChild (tr );
If (nextNextObj) tbody. insertBefore (tr, nextNextObj );
Else tbody. appendChild (tr );
}
</Script>
</Head>
<Body>
<Table>
<Tr> <td> NO. </td> <td> name </td> </tr>
<Tr> <td> 1 </td> <td> 11111 </td> <a href = "javascript:;" onclick = "up (this) "> move up </a> </td>
... The remaining full text>

Move the jquery js list up and down. Are you sure you want to write it?

You mean that two divs have different groups of data. Do you want to move the data in div1 to div2?
In this case, use div1 on the left to delete the current data and div2 on the right to add the data.