javascript - 使用缩进按钮调整 TD 内容填充无法正常工作

Question

嗨，我有一个可编辑的表格。我想像 Excel 页面一样更改我的表格。我左右有两个按钮，它们是用于调整 Td 内容填充的缩进按钮我的要求是1.第一行TD始终为粗体2.第二行TD在选择正常字体粗细的情况下点击左侧按钮时会移动20px3.类似的方式下一行TD在第一次点击时移动20，在第二次点击时移动40，字体较小

    $(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");
            });

        });
    }); 

希望这有帮助...