xgqfrms-GitHub/JS Table up & down.md Secret

## JS Table up & down.md

      
    Raw
  

              JS Table up & down.md
            
          
    JS Table up & down


上移 下移

    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格 http://uule.iteye.com/blog/1860542</title>
    <style>
        * {
            text-align: center;
        }
        
        .color1 {
            color: red;
        }
        
        .color2 {
            color: #0ff;
        }
        
        .color3 {
            color: #0f0;
        }
        
        .color4 {
            color: #f0f;
        }
        
        .up {
            color: #0f0;
            margin: auto 10px;
        }
        
        .dowm {
            color: #f0f;
            margin: auto 10px;
        }
    </style>
</head>

<!-- .map()  -->

<body>
    <table class="grid" width="80%" border="1" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <td>ID</td>
                <td>Name</td>
                <td>show / hidden</td>
                <td>Up / Down</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="color1">1</td>
                <td>
                    textfield 1
                </td>
                <td><input type="checkbox" name="checkbox" id="checkbox" /></td>
                <td>
                    <a href="javascript:void(0)" onclick="moveUp(this)" class="up">上移</a>
                    <a href="javascript:void(0)" onclick="moveDown(this)" class="down">下移</a>
                </td>
            </tr>
            <tr>
                <td class="color2">2</td>
                <td>
                    textfield 2
                </td>
                <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td>
                <td>
                    <a href="javascript:void(0)" onclick="moveUp(this)" class="up">上移</a>
                    <a href="javascript:void(0)" onclick="moveDown(this)" class="down">下移</a>
                </td>
            </tr>
            <tr>
                <td class="color3">3</td>
                <td>
                    textfield 3
                </td>
                <td><input type="checkbox" name="checkbox3" id="checkbox3" /></td>
                <td>
                    <a href="javascript:void(0)" onclick="moveUp(this)" class="up">上移</a>
                    <a href="javascript:void(0)" onclick="moveDown(this)" class="down">下移</a>
                </td>
            </tr>
            <tr>
                <td class="color4">4</td>
                <td>
                    textfield 4
                </td>
                <td><input type="checkbox" name="checkbox4" id="checkbox4" /></td>
                <td>
                    <a href="javascript:void(0)" onclick="moveUp(this)" class="up">上移</a>
                    <a href="javascript:void(0)" onclick="moveDown(this)" class="down">下移</a>
                </td>
            </tr>
        </tbody>
    </table>
    <!-- js  -->
    <script src="https://cdn.xgqfrms.xyz/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        function moveUp(obj) {
            var current = $(obj).parent().parent();
            var prev = current.prev();
            if (current.index() > 0) {
                current.insertBefore(prev);
            }
        }

        function moveDown(obj) {
            var current = $(obj).parent().parent();
            var next = current.next();
            if (next) {
                current.insertAfter(next);
            }
        }
    </script>
</body>

</html>
https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly