Question

Jquery 사용하기 저는 함수가있어서 스타일을 유지하면서 각 요소의 끝에 내용을 삽입하고 싶습니다. document.write();으로 작동하지만 append();으로 스타일이 바뀝니다. 어떻게 해결할 수 있습니까?

JS :

function show_calendar() { 
    $("#output").html("<div id='box' style='border: 1px solid black; width: 350px; height:auto; border-radius: 3px; padding: 3px;margin: 0px;'><div id='head' style='margin: 0px;padding: 3px;border: 1px solid #c5c5c5;height: 40px;border-radius: 3px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 20px;text-align: center;line-height: 40px;background: #e9e9e9;'><div id='prec' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: left;'><div id='head-prec' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div><span>" + title_month + " " +year+ "</span><div id='succ' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: right;'><div id='head-succ' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div></div><div id='footer' style='margin: 0px;padding: 3px;height: auto;'><table style='margin: 0px auto;padding: 4px;'><tr>"); 

    for (var i=0; i<=6; i++) { 
     $("#output").append("<th style='padding: 2px;'>"+week_days[i]+"</th>"); 
    } 

//other code here ... 

HTML :

<input type="text" id="cal" onclick="show_calendar();" /> 
<div id="output"></div> 

코드 전체 JS

function show_calendar() { 
    $("#output").html("<div id='box' style='border: 1px solid black; width: 350px; height:auto; border-radius: 3px; padding: 3px;margin: 0px;'><div id='head' style='margin: 0px;padding: 3px;border: 1px solid #c5c5c5;height: 40px;border-radius: 3px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 20px;text-align: center;line-height: 40px;background: #e9e9e9;'><div id='prec' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: left;'><div id='head-prec' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div><span>" + title_month + " " +year+ "</span><div id='succ' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: right;'><div id='head-succ' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div></div><div id='footer' style='margin: 0px;padding: 3px;height: auto;'><table style='margin: 0px auto;padding: 4px;'><tr>"); 
    for (var i=0; i<=6; i++) { 
     $("#output table").append("<th style='padding: 2px;'>"+week_days[i]+"</th>"); 
    } 
       $("#output").append("</tr>"); 
       count = 1; 
       days_count = 1; 
       for (var i=0; i<6; i++) { 
        $("#output").append("<tr>"); 
        for (var j=0; j<7; j++) { 
         if (last_day == 1) 
          last_day=30; 
         else if (last_day == 2) 
          last_day=29; 
         else if(last_day == 3) 
          $last_day=28; 
         if (days_count > last_day || count < first_day) { 
          $("#output").append("<td></td>"); 
         }else { 
        $("#output").append("<td id="+days_count+" style='text-align: right;border: 1px solid #c5c5c5;background: #f6f6f6;font-weight: normal;color: #454545;height: 22px; cursor:pointer'>"+days_count+"</td>"); 
          days_count+=1; 
         } 
         count+=1; 
        } 
        $("#output").append("</tr>"); 
       } 
       $("#output").append("</table></div></div>"); 

       $("td#"+day).css("background", "yellow"); 


      } 

Answer 1

Working fiddle. 이 도움이

$("#output table").append("<th style='padding: 2px;'>"+week_days[i]+"</th>"); 
___________^^^^^ 

희망 :

당신은 마지막에 th 테이블에의하지를 추가해야합니다.

var title_month = "August"; 
 
var year = 2016; 
 
var week_days = ['Mon','Tue','Thu','Wed','Fri','Sat','Sun'] 
 
var first_day= 1; 
 
var last_day = 30; 
 
var day = 7; 
 

 
function show_calendar() { 
 
    $("#output").html("<div id='box' style='border: 1px solid black; width: 350px; height:auto; border-radius: 3px; padding: 3px;margin: 0px;'><div id='head' style='margin: 0px;padding: 3px;border: 1px solid #c5c5c5;height: 40px;border-radius: 3px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 20px;text-align: center;line-height: 40px;background: #e9e9e9;'><div id='prec' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: left;'><div id='head-prec' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div><span>" + title_month + " " +year+ "</span><div id='succ' style='margin: 0px;border: 1px solid black;height: inherit;width: 40px;float: right;'><div id='head-succ' style='cursor:pointer; position: relative;margin: 10px auto;width: 50%;height: 50%;border: 1px solid black;border-radius: 50%;background: #333333;'></div></div></div><div id='footer' style='margin: 0px;padding: 3px;height: auto;'><table style='margin: 0px auto;padding: 4px;'>"); 
 

 
    var thead = $('<thead><tr></tr></thead>') 
 
    for (var i=0; i<=6; i++) { 
 
    thead.append("<th style='padding: 2px;'>"+week_days[i]+"</th>"); 
 
    } 
 
    $("#output table").append(thead); 
 

 
    count = 1; 
 
    days_count = 1; 
 

 
    for (var i=0; i<6; i++) { 
 
    var tr = $('<tr></tr>'); 
 

 
    for (var j=0; j<7; j++) { 
 
     if (last_day == 1) 
 
     last_day=30; 
 
     else if (last_day == 2) 
 
     last_day=29; 
 
     else if(last_day == 3) 
 
     $last_day=28; 
 
     if (days_count > last_day || count < first_day) { 
 
     tr.append("<td></td>"); 
 
     }else { 
 
     tr.append("<td id="+days_count+" style='text-align: right;border: 1px solid #c5c5c5;background: #f6f6f6;font-weight: normal;color: #454545;height: 22px; cursor:pointer'>"+days_count+"</td>"); 
 
     days_count+=1; 
 
     } 
 
     count+=1; 
 
    } 
 
    $("#output table").append(tr); 
 
    } 
 

 
    $("td#"+day).css("background", "yellow"); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="cal" onclick="show_calendar();" /> 
 
<div id="output"></div>