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

您好，我有一个可编辑的表格。我想完全像excel页面一样更改我的表格。我有两个左右按钮，它们是调整Td内容填充的缩进按钮 我的要求是 1.第一行TD始终为粗体 2.当第二行TD选择并单击具有正常字体重量的左按钮时，它将移动20px 3.类似的方式下一行TD是第一次点击移动20第二次点击移动40小字体

$（函数（）{
$（“tr”）。在（“单击”，函数（）{
$（this.toggleClass（'selected1'）；
});
$（“td.cat”）.dblclick（函数（）{
var OriginalContent=$（this.text（）；
$（this.addClass（“cellEditing1”）
$（this.html（“”）；
})
$（“tr”）。在（“单击”，函数（）{
$（this.toggleClass（'selected1'）；
});
$（“.cat”）。在（“单击”，函数（）{
$（this.toggleClass（'selected'）；
});
$（“#键”）。单击（函数（）{
var sl=parseInt（$（“.selected”）.css（“左填充”）；
sl=sl>=100？“100”：“+=20”；
$（“.selected”）.css({
“左填充”：sl
});
$（“.cat.selected”）。每个（函数（）{
var-prevTd=$（this.closest（'tr'）.prev（'tr'）.find（'td:eq（+$（this.index（）++'）））；
log（'当前td索引：'+$（this.index（））；
log（'previoustd content:'+prevTd.text（））；
var paddingLeftpl=parseInt（$（this）.css（“paddingLeftpl”）；
变量isPaddingLeft20=“”，isPaddingLeft40=”；
如果（paddingLeftpl>20）
isPaddingLeft20=填充左PL；
如果（paddingLeftpl>40）
isPaddingLeft40=填充左PL；
如果（isPaddingLeft20）{
prevTd.addClass（“mainfunctionstyle”）；
prevTd.find（'input'）.addClass（“mainfunctionstyle”）；
prevTd.addClass（“mainfunctionstyle”）
}
如果（isPaddingLeft40）{
prevTd.find（'input'）.addClass（“sunfunctionstyle”）；
prevTd.addClass（“子功能样式”）；
prevTd.addClass（“子功能样式”）；
}
else$（this.css（“颜色”、“灰色”）；
});
});
$（“#键1”）。单击（函数（）{
var sl=parseInt（$（“.selected”）.css（“左填充”）；
sl=sl>=100？“100”：“+=20”；
$（“.selected”）.css({
“左填充”：sl
});
$（“.cat.selected”）。每个（函数（）{
var-prevTd=$（this.closest（'tr'）.prev（'tr'）.find（'td:eq（+$（this.index（）++'）））；
log（'当前td索引：'+$（this.index（））；
log（'previoustd content:'+prevTd.text（））；
var paddingLeftpl=parseInt（$（this）.css（“paddingLeftpl”）；
变量isPaddingLeft20=“”，isPaddingLeft40=”；
如果（paddingLeftpl>20）
isPaddingLeft20=填充左PL；
如果（paddingLeftpl>40）
isPaddingLeft40=填充左PL；
如果（isPaddingLeft20）{
prevTd.addClass（“mainfunctionstyle”）；
prevTd.find（'input'）.addClass（“mainfunctionstyle”）；
prevTd.addClass（“mainfunctionstyle”）
}
如果（isPaddingLeft40）{
prevTd.find（'input'）.addClass（“sunfunctionstyle”）；
prevTd.addClass（“子功能样式”）；
prevTd.addClass（“子功能样式”）；
}
else prevTd.css（“颜色”、“灰色”）；
});
});
});
。已选定{
背景颜色：浅蓝色；
}
.可编辑表格{
位置：静态；
宽度：100%；
边界塌陷：塌陷；
}
.可编辑表格td{
边框：1px实心；
高度：17px；
}
.editableTable.cellEditing1输入[类型=文本]{
宽度：100%；
边界：无；
文本对齐：左对齐；
背景色：透明；
}
.editableTable.cellEditing1{
填充：0；
高度：1px；
}
.main函数样式{
颜色：黄色；
字体大小：粗体；
字体大小：10px；
}
.sunfunctionstyle{
颜色：黑色；
字体大小：正常；
字号：8px；
}
.任务风格{
颜色：红色；
字体大小：正常；
字号：8px；
}

左边
正确的
玫瑰11
红色12
玫瑰21
红色22
玫瑰31
红色32
玫瑰41
红色42
在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");
            });

        });
    }); 

$（函数（）{
$（“tr”）。在（“单击”，函数（）{
$（this.toggleClass（'selected1'）；
});
$（“td.cat”）.dblclick（函数（）{
var OriginalContent=$（this.text（）；
$（this.addClass（“cellEditing1”）
$（this.html（“”）；
var col=$（this.parent（）.children（）.index（$（this））；
变量行=$（this.parent（）.parent（）.children（）.index（$（this.parent（））；
//警报（'行：'+行+'，列：'+col）；
变量pad_left_val=（行+1）*10+“px”；
$（this.css（“padding left”，pad_left_val）；
})
$（“tr”）。在（“单击”，函数（）{
$（this.toggleClass（'selected1'）；
});
$（“.cat”）。在（“单击”，函数（）{
$（this.toggleClass（'selected'）；
});
$（“#键”）。单击（函数（）{
var sl=parseInt（$（“.selected”