Question

我有一个可编辑的表格，然后我还有两个按钮。当我在表格中添加一些文字并选择它（使用onclick the table coloumn）选择表格后点击左键，td中的内容向左移动（20px-首次点击40秒点击....）i想要在每次点击时更改字体权重。我在这里写一些代码来改变字体重量，但它不起作用

＆＃13;

  $(function () {
                $("td.cat").dblclick(function () {
                    var OriginalContent = $(this).text();
                    $(this).addClass("cellEditing1")
                    $(this).html("<input id='value' type='text' value='" + OriginalContent + "' />");
                })
            })
            $(document).ready(function () {
                $("tr").on("click", function () {
                    $(this).toggleClass('selected1');
                });
            });

            jQuery(document).ready(function () {

                $(".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 paddingLeft = parseInt($(this).css("cellEditing2"));
                        var paddingLeft = parseInt($(this).css("padding-left"));
                        var isPaddingLeft20 = paddingLeft === 21;

                        var isPaddingLeft40 = paddingLeft === 41;

                        if (isPaddingLeft20) $(this).css("font-weight", "bold");
                        else if (isPaddingLeft40) $(this).css("font-style", "italic");
                        else $(this).css("color", "grey");
                    });
                });
                $("#key1").click(function () {
                    $(".selected").css({
                        "padding-left": "-=" + "20"
                    });
                    $(".cat.selected").each(function () {
           
                        var paddingLeft = parseInt($(this).css("padding-left"));
                        var PaddingLeft20 = paddingLeft === 21;
                        var PaddingLeft40 = paddingLeft === 41;
                        if (PaddingLeft20) $(this).css("font-weight", "normal");
                        else if (isPaddingLeft40) $(this).css("font-style", "italic");
                        else $(this).css("font-weight", "bold");
                    });
                });

            });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
        div {
            background-color: yellow;
            margin-top: 20px;
        }

        div {
        }

        .selected {
            background-color: lightblue;
        }
        .cat{
        
     border: 1px solid;
    border-color: lightgray;
    width:90%;
   height:17px;
   font-size:15px;
   padding-left:-5px;
   color:rgb(178,178,178);
  
}
 .editableTable .cellEditing1 input[type=text]{ 
       width:100%;
     border:none;
      text-align: left;
     background-color:transparent;
     
      
  }.editableTable .cellEditing1 {
      padding: 0;
    height:1px;
 } 
        
    </style>
</head>
<body>
    <button id="key">left</button>
    <button id="key1">right</button>


    <table class="editableTable">
        <tr>
            <td class="cat">aaa</td>
            <td class="dog"></td>
            <td class="dog"></td>
        </tr>
        
        </table>

＆＃13;

jq-在可编辑的表格样式更改功能不起作用

0 个答案: