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

时间:2016-07-05 05:47:28

标签: javascript html css

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

我的要求是

  1. 当td内容填充达到20px时,内容字体粗细应为粗体。当它达到40px时(在第二次点击时)字体样式应该是正常的,当它达到60px(第三次点击)时,字体颜色应该是灰色的。

  2. 在编辑之前它运作良好,但在它不起作用之后。

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

2 个答案:

答案 0 :(得分: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");
}

答案 1 :(得分:1)

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