javascript - 如何在函数工作依赖于 thor td 时更改以前的 td 样式

Question

我有一个包含多个 td 的表。我的td是可选的我的要求是

1.在选择一些 td 并单击左键后，我想更改可选项目的上一个 td(只需查看下图以了解所需的 td)

我用了 ".prev("td")"我认为这不是选择上一个 td 的好方法我该如何解决这个问题

只看图中第三行和第四行第一列现在被选中我想更改未选中的 td 第二 tr 第一列样式

  $(function(){
            $(document).ready(function () {
                $("tr").on("click", function () {
                    $(this).toggleClass('selected1');
                });
            });
        })
            $(function () {
                $("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 paddingLeftpl = parseInt($(this).css("padding-left"));
                        var isPaddingLeft20="",isPaddingLeft40='';
                        if(paddingLeftpl>20)
                            isPaddingLeft20 = paddingLeftpl;
                        if(paddingLeftpl>40)
                            isPaddingLeft40=paddingLeftpl;
                        if (isPaddingLeft20) {

                            $(this.prev("td")).addClass("mainfunctionstyle");
                            $(this.prev("td")).find('input').addClass("mainfunctionstyle");
                            $(this.prev("td")).addClass("mainfunctionstyle")
                        }
                        if (isPaddingLeft40) {
                            $(this.prev("td")).find('input').addClass("sunfunctionstyle");
                            $(this.prev("td")).addClass("subfunctionstyle");
                            $(this.prev("td")).addClass("subfunctionstyle");

                        }
                        else $(this).addClass("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 paddingLeftpl = parseInt($(this).css("padding-left"));
                        var isPaddingLeft20="",isPaddingLeft40='';
                        if(paddingLeftpl>20)
                            isPaddingLeft20 = paddingLeftpl;
                        if(paddingLeftpl>40)
                            isPaddingLeft40=paddingLeftpl;
                        if (isPaddingLeft20) {

                            $(this.prev("td")).addclass("mainfunctionstyle");
                            $(this.prev("td")).find('input').addClass("mainfunctionstyle");
                            $(this.prev("td")).addClass("mainfunctionstyle")
                        }
                        if (isPaddingLeft40) {
                            $(this.prev("td")).find('input').addClass("sunfunctionstyle");
                            $(this.prev("td")).addClass("subfunctionstyle");
                            $(this.prev("td")).addClass("subfunctionstyle");

                        }
                        else $(this.prev("td")).addClass("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" >rose</td>
            <td class="cat" >red</td>
          
        </tr>
        <tr>
            <td class="cat">rose</td>
            <td class="cat">red</td>
          
        </tr>
        <tr>
            <td class="cat">rose</td>
            <td class="cat">red</td>
         
        </tr>
        <tr>
            <td class="cat">rose</td>
            <td class="cat">red</td>

        </tr>
    </table>

Answer 1

如果您需要选择之前的 td 单元格，您可以使用:

$(this).closest('tr').prev('tr').find('td:eq(' + $(this).index() + ')')

代替:

$(this.prev("td"))

我的片段:

$(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://code.jquery.com/jquery-1.12.1.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>