Question

嗨，我有一个可编辑的表。我想改变我的表格，就像一个excel页面。我有两个按钮左右两边是我的缩进按钮，用于调整Td内容填充我的要求是 1.第一行TD总是粗体 2.当第二行TD选择并单击具有正常字体粗细的左按钮时，将移动20px 3.类似方式下一行TD在第一次点击40时移动20，第二次点击时字体小

    $(function () {
            $("tr").on("click", function () {
                $(this).toggleClass('selected1');
            });
            $("td.cat").dblclick(function () {
                var OriginalContent = $(this).text();
                $(this).addClass("cellEditing1")
                $(this).html("<input id='value' type='text' value='" + OriginalContent + "' />");
            })

            $("tr").on("click", function () {
                $(this).toggleClass('selected1');
            });


            $(".cat").on("click", function () {
                $(this).toggleClass('selected');
            });

            $("#key").click(function () {

                var sl = parseInt($(".selected").css("padding-left"));
                sl = sl >= 100 ? "100" : "+=20";

                $(".selected").css({
                    "padding-left": sl

                });
                $(".cat.selected").each(function () {
                    var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
                    console.log('Current td index: ' + $(this).index());
                    console.log('Previous td content: ' + prevTd.text());
                    var paddingLeftpl = parseInt($(this).css("padding-left"));
                    var isPaddingLeft20 = "", isPaddingLeft40 = '';
                    if (paddingLeftpl > 20)
                        isPaddingLeft20 = paddingLeftpl;
                    if (paddingLeftpl > 40)
                        isPaddingLeft40 = paddingLeftpl;
                    if (isPaddingLeft20) {
                        prevTd.addClass("mainfunctionstyle");
                        prevTd.find('input').addClass("mainfunctionstyle");
                        prevTd.addClass("mainfunctionstyle")
                    }
                    if (isPaddingLeft40) {
                        prevTd.find('input').addClass("sunfunctionstyle");
                        prevTd.addClass("subfunctionstyle");
                        prevTd.addClass("subfunctionstyle");

                    }
                    else $(this).css("color", "grey");
                });
            });
            $("#key1").click(function () {
                var sl = parseInt($(".selected").css("padding-left"));
                sl = sl >= 100 ? "100" : "+=20";

                $(".selected").css({
                    "padding-left": sl

                });
                $(".cat.selected").each(function () {
                    var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
                    console.log('Current td index: ' + $(this).index());
                    console.log('Previous td content: ' + prevTd.text());
                    var paddingLeftpl = parseInt($(this).css("padding-left"));
                    var isPaddingLeft20 = "", isPaddingLeft40 = '';
                    if (paddingLeftpl > 20)
                        isPaddingLeft20 = paddingLeftpl;
                    if (paddingLeftpl > 40)
                        isPaddingLeft40 = paddingLeftpl;
                    if (isPaddingLeft20) {
                        prevTd.addClass("mainfunctionstyle");
                        prevTd.find('input').addClass("mainfunctionstyle");
                        prevTd.addClass("mainfunctionstyle")
                    }
                    if (isPaddingLeft40) {
                        prevTd.find('input').addClass("sunfunctionstyle");
                        prevTd.addClass("subfunctionstyle");
                        prevTd.addClass("subfunctionstyle");

                    }
                    else prevTd.css("color", "grey");
                });

            });
        });

 .selected {
  background-color: lightblue;
}

.editableTable {
  position: static;
  width: 100%;
  border-collapse: collapse;
}

.editableTable td {
  border: 1px solid;
  height: 17px;
}

.editableTable .cellEditing1 input[type=text] {
  width: 100%;
  border: none;
  text-align: left;
  background-color: transparent;
}

.editableTable .cellEditing1 {
  padding: 0;
  height: 1px;
}

.mainfunctionstyle {
  color: yellow;
  font-weight: bold;
  font-size: 10px;
}

.sunfunctionstyle {
  color: black;
  font-weight: normal;
  font-size: 8px;
}

.taskstyle {
  color: red;
  font-weight: normal;
  font-size: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="key">left</button>
    <button id="key1">right</button>
    <table class="editableTable">
        <tr>
            <td class="cat">rose11</td>
            <td class="cat">red12</td>
        </tr>
        <tr>
            <td class="cat">rose21</td>
            <td class="cat">red22</td>
        </tr>
        <tr>
            <td class="cat">rose31</td>
            <td class="cat">red32</td>
        </tr>
        <tr>
            <td class="cat">rose41</td>
            <td class="cat">red42</td>
        </tr>
    </table>

4.next变为20,40,60px，灰色

这是我的代码我也分享了一个图像，以满足我想要的图像

Answer 1

在jquery中添加了几行。

             $(function () {
        $("tr").on("click", function () {
            $(this).toggleClass('selected1');
        });
        $("td.cat").dblclick(function () {
            var OriginalContent = $(this).text();
            $(this).addClass("cellEditing1")
            $(this).html("<input id='value' type='text' value='" + OriginalContent + "' />");

              var col = $(this).parent().children().index($(this));
              var row = $(this).parent().parent().children().index($(this).parent());
              //alert('Row: ' + row + ', Column: ' + col);

              var pad_left_val = (row+1)*10 + "px";
              $(this).css("padding-left", pad_left_val);
        })

        $("tr").on("click", function () {
            $(this).toggleClass('selected1');
        });


        $(".cat").on("click", function () {
            $(this).toggleClass('selected');
        });

        $("#key").click(function () {

            var sl = parseInt($(".selected").css("padding-left"));
            sl = sl >= 100 ? "100" : "+=20";

            $(".selected").css({
                "padding-left": sl

            });
            $(".cat.selected").each(function () {
                var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
                console.log('Current td index: ' + $(this).index());
                console.log('Previous td content: ' + prevTd.text());
                var paddingLeftpl = parseInt($(this).css("padding-left"));
                var isPaddingLeft20 = "", isPaddingLeft40 = '';
                if (paddingLeftpl > 20)
                    isPaddingLeft20 = paddingLeftpl;
                if (paddingLeftpl > 40)
                    isPaddingLeft40 = paddingLeftpl;
                if (isPaddingLeft20) {
                    prevTd.addClass("mainfunctionstyle");
                    prevTd.find('input').addClass("mainfunctionstyle");
                    prevTd.addClass("mainfunctionstyle")
                }
                if (isPaddingLeft40) {
                    prevTd.find('input').addClass("sunfunctionstyle");
                    prevTd.addClass("subfunctionstyle");
                    prevTd.addClass("subfunctionstyle");

                }
                else $(this).css("color", "grey");
            });
        });
        $("#key1").click(function () {
            var sl = parseInt($(".selected").css("padding-left"));
            sl = sl >= 100 ? "100" : "+=20";

            $(".selected").css({
                "padding-left": sl

            });
            $(".cat.selected").each(function () {
                var prevTd = $(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')');
                console.log('Current td index: ' + $(this).index());
                console.log('Previous td content: ' + prevTd.text());
                var paddingLeftpl = parseInt($(this).css("padding-left"));
                var isPaddingLeft20 = "", isPaddingLeft40 = '';
                if (paddingLeftpl > 20)
                    isPaddingLeft20 = paddingLeftpl;
                if (paddingLeftpl > 40)
                    isPaddingLeft40 = paddingLeftpl;
                if (isPaddingLeft20) {
                    prevTd.addClass("mainfunctionstyle");
                    prevTd.find('input').addClass("mainfunctionstyle");
                    prevTd.addClass("mainfunctionstyle")
                }
                if (isPaddingLeft40) {
                    prevTd.find('input').addClass("sunfunctionstyle");
                    prevTd.addClass("subfunctionstyle");
                    prevTd.addClass("subfunctionstyle");

                }
                else prevTd.css("color", "grey");
            });

        });
    });

希望这会有所帮助......

使用缩进按钮调整TD内容填充不能正常工作

1 个答案: