Ändern der Schriftgröße nach der Bearbeitung funktioniert nicht

Question

Ich habe eine HTML-Tabelle, die bearbeitet werden kann. Dann habe ich zwei Knöpfe, die benutzt werden, um das Padding des TD-Inhalts zu ändern.

Meine Forderung ist

1. Wenn der td Inhalt Polsterung erreicht 20px der Inhalt Schriftstärke fett sein sollte. Wenn es 40px (beim zweiten Klick) erreicht, sollte der Font-Stil normal sein und wenn er 60px erreicht (dritter Klick) sollte die Schriftfarbe grau sein.

2. Es funktionierte gut vor der Bearbeitung, aber nachdem es nicht funktioniert.

$(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() wird hilfreich sein. verwenden, um dies in den <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... 

Im checkFunction(), schreiben Sie Ihre eigentliche Logik!

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>