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。

あなただけの最後にある表にth Sを追加していないする必要があります。

$("#output table").append("<th style='padding: 2px;'>"+week_days[i]+"</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>