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

changing the font weight after editing is not working

本文关键字：不起作用字体编辑更新时间：2023-09-26

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

我的要求是

当td内容填充达到20px时，内容字体粗体应加粗。当它达到40px(第二次点击)时，字体样式应该是正常的，当它达到60px(第三次点击)时，字体颜色应该是灰色的。
编辑前工作正常，编辑后不工作

 $(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>

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");
}

<!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>