CODEWITHSUNDEEP
javascriptjquery
aswathy
aswathy

Reputation: 395

adjusting the TD content padding using indent button is not working properly

hi i have a table which is editable .i want change my table exactly like a excel page .i have two button left and right that are my indent button for adjusting the Td content padding my requirement is 1.the first row TD always bold 2.and the second row TD will move 20px when it select and click the left button with normal font weight 3.similar way next row TD are move 20 on first click 40 on second click with small font size

    $(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 is become 20 ,40,60px with gray color

this is my code i also share a image for under stand the requiremententer image description here i want exactly like that image

Upvotes: 1

Views: 50

Answers (1)

T.Shah
T.Shah

Reputation: 2768

Added a few lines in 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");
            });

        });
    });

Hope this helps...

Upvotes: 0

Related Questions