编辑后更改字体粗细不起作用

Question

我有一个可编辑的 HTML 表格。然后我有两个按钮，用于更改 td 内容的填充。

我的要求是

1. 当 td 内容内边距达到 20px 时，内容字体粗细应为粗体。当它达到40px（第二次点击）字体样式应该是正常的，当它达到60px（第三次点击）字体颜色应该是灰色的。

2. 编辑前运行良好，但编辑后就不行了。

 $(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", "bold");
                        else if (isPaddingLeft40) $(this).css("font-style", "normal");
                        else $(this).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;
        }
    

<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">cash</td>
            <td class="cat">black</td>
           
        </tr>
    </table>

Answer 1

onKeyPress=checkFunction() 会有所帮助。在<input></input>中使用它

 $(function () {
                $("td.cat").dblclick(function () {
                    var OriginalContent = $(this).text();
                    $(this).addClass("cellEditing1")
                    $(this).html("<input id='value' onKeyPress="checkFunction()" type='text' value='" + OriginalContent + "' />");
                })
            })
// rest of your code goes here...

在 checkFunction() 中，写下你的实际逻辑！

function checkFunction(){
  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");
}

Answer 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Array in chunkSize</title>
<style> .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;
        }

</style>
</head>
<body>
<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">cash</td>
            <td class="cat">black</td>

        </tr>
    </table>
    <script src="js/bootstrap.js" type="text/javascript"></script> 
<script>
$(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).css("font-weight", "bold");$(this).find('input').css("font-weight", "bold");$(this).css("color", "green")}
                         if (isPaddingLeft40){  $(this).find('input').css("font-style", "italic");$(this).css("font-style", "italic");$(this).css("color", "blue");$(this).find('input').css("color", "blue");}
                        else $(this).css("color", "grey");
                    });
                });
                $("#key1").click(function () {
                    $(".selected").css({
                        "padding-left": "-=" + "20"
                    });
                    $(".cat.selected").each(function () {

                       var paddingLeftpl = parseInt($(this).css("padding-left"));
                        var isPaddingLeft20="",isPaddingLeft40='';
                        if(paddingLeftpl<22)
                         isPaddingLeft20 = paddingLeftpl;
                        if(paddingLeftpl<42)
                            isPaddingLeft40=paddingLeftpl;
                        if (isPaddingLeft20){ $(this).css("font-weight", "normal");$(this).find('input').css("font-weight", "normal");$(this).css("color", "black")}
                         if (isPaddingLeft40){  $(this).find('input').css("font-style", "normal");$(this).css("font-style", "normal");$(this).css("color", "brown");$(this).find('input').css("color", "brown");}
                        else $(this).css("color", "grey");
                    });

            });

            });


            </script>


</body>
</html>