Table行拖拽自己实现

最新推荐文章于 2024-08-21 11:09:28 发布

fhuan123

最新推荐文章于 2024-08-21 11:09:28 发布

阅读量849

点赞数

分类专栏： JQuery 文章标签： jQuery ViewUI

本文链接：https://blog.csdn.net/fhuan123/article/details/83973157

版权

JQuery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<table id="myTable">
                                <tr>
                                    <td>
                                        <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
                                    </td>
                                    <td>
                                        One444444444iiiiiiiiiiifdsfsdfsfsfsdfsdfsd
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
                                    </td>
                                    <td>
                                        Two
                                    </td>
                                </tr>
                                <tr>
                                    <td style="display:none">
                                        <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
                                    </td>
                                    <td>
                                        Three
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
                                    </td>
                                    <td>
                                        Four
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
                                    </td>
                                    <td>
                                        Five
                                    </td>
                                </tr>
                            </table>
                            <br>
                            <a href="#" class="add">Add new</a>

$(function () {
        $(document).ready(function () {
            setCssRules();
            
            $(".up,.down").live('click', function () {
                var row = $(this).parents("tr:first");
                if ($(this).is(".up")) {
                    row.insertBefore(row.prev());
                } else {
                    row.insertAfter(row.next());
                }
            });
            $(".add").click(function () {
                $('#myTable tr:last').after('<tr><td><a href="#" class="up">Up</a><a href="#" class="down">Down</a></td><td>New</td></tr>');
                setCssRules();
                $("#myTable").tableDnD();
            });
        });
function setCssRules() {
            // this would be better implemented in a CSS file
            jQuery('#myTable tr:not(\'#rowHeader\')')
            .css('cursor', 'pointer')
            .mouseover(function () {
                jQuery(this).css('background-color', '#c0c0c0');
            })
            .mouseout(function () {
                jQuery(this).css('background-color', '#ffffff');
            });
        }
$('#myTable td').live('click', function () {
            var tr = $(this).parent();
            for (var i = 0; i < tr.children().length; i++) {
                if (tr.children().get(i) == this) {
                    var column = i;
                    break;
                }
            }

            var tbody = tr.parent();
            for (var j = 0; j < tbody.children().length; j++) {
                if (tbody.children().get(j) == tr.get(0)) {
                    var row = j;
                    break;
                }
            }

            for (var i = 0; i < tr.children().length; i++) {
                for (var j = 0; j < tbody.children().length; j++) {
                    var tempcell = $('#myTable tr:eq(' + j + ') td:eq(' + i + ')');
                    $(tempcell).css('background-color', '#ffffff');
                }
            }
            var cell = $('#myTable tr:eq(' + row + ') td:eq(' + column + ')');
            if (cell.length == 0) {
                //alert('Undefined');
            }
            else if (column == 1) {
                //alert(row+'  '+column+' '+cell.text());
                $(cell).css('background-color', '#c0c0c0');

            }

        });

    });