【javascript】WordPressで記事の中にJavaScriptを埋め込んだ時に困った

【javascript】WordPressで記事の中にJavaScriptを埋め込んだ時に困った

,
JavaScript,WordPress
No Comments

WordPressで記事の中にJavaScriptを埋め込んだ時に困った

この記事記事を作成した際にJavaScriptでリストを作成する処理を行っています。

自分の他にも困っている人が多くいるようなので、メモです。

JavaScriptを記事の中に埋め込む際、保存時に自動で修正されてしまうようです。

少し調べて分かったことは

・空白行があるとPタグが割り込んでくる

・DIVタグがあると改行される

http://gashubq.com/gashubq-view/wordpress/javascript-no-plugin

自分が作成したJavaScriptの中にはDIVの記述がなかったため、こんな感じで記述しました。

function createTable(){
    var dat = '';
    var json = '';
    var records;
    var result;
    var html = '';
    // データを読み込む
    dat = $('#dataSource TextArea').val();
    // JSONにする
    json = jQuery.parseJSON(dat);
    // テーブルを作成する
    html += '
<table>';
    html += '
<thead>';
    html += '
<tr>';
    html += '
<td>';
    html += '        Name';
    html += '      </td>

';
    html += '
<td>';
    html += '        Coverage';
    html += '      </td>

';
    html += '
<td>';
    html += '        NumLinesCovered';
    html += '      </td>

';
    html += '
<td>';
    html += '        NumLinesUncovered';
    html += '      </td>

';
    html += '    </tr>

';
    html += '  </thead>

';
    html += '
<tbody>';
    records = json.records;
    for(var index in records){
        var coverage = 0;
        coverage = Number(records[index].NumLinesCovered) + 
                   Number(records[index].NumLinesUncovered);

        if(records[index].NumLinesCovered != 0){
            coverage = Number(records[index].NumLinesCovered) / coverage;
        }else{
            coverage = 0;
        }
        html += '
<tr>';
        html += '
<td>';
        html += '          ' + records[index].ApexClassOrTrigger.Name;
        html += '      </td>

';
        html += '
<td style="text-align: right;" >';
        html += '          ' + Math.floor(coverage * 100) + '%';
        html += '      </td>

';
        html += '
<td style="text-align: right;" >';
        html += '          ' + records[index].NumLinesCovered;
        html += '      </td>

';
        html += '
<td style="text-align: right;" >';
        html += '          ' + records[index].NumLinesUncovered;
        html += '      </td>

';
        html += '    </tr>

';
    }
    html += '  </tbody>

';
    html += '</table>

';
    // HTMLに追加する
    result = $('#result');
    result.html(html);
}

空白行を潰し、DIVタグも使ってないので完璧と思われたのですが、そういうわけでもありませんでした。

更新時に修正されたコードです。

function createTable(){
    var dat = '';
    var json = '';
    var records;
    var result;
    var html = '';
    // データを読み込む
    dat = $('#dataSource TextArea').val();
    // JSONにする
    json = jQuery.parseJSON(dat);
    // テーブルを作成する
    html += '

<table>';
    html += '  

<thead>';
    html += '    

<tr>';
    html += '      

<td>';
    html += '        Name';
    html += '      </td>



';
    html += '      

<td>';
    html += '        Coverage';
    html += '      </td>



';
    html += '      

<td>';
    html += '        NumLinesCovered';
    html += '      </td>



';
    html += '      

<td>';
    html += '        NumLinesUncovered';
    html += '      </td>



';
    html += '    </tr>



';
    html += '  </thead>



';
    html += '  

<tbody>';
    records = json.records;
    for(var index in records){
        var coverage = 0;
        coverage = Number(records[index].NumLinesCovered) + 
                   Number(records[index].NumLinesUncovered);



        if(records[index].NumLinesCovered != 0){
            coverage = Number(records[index].NumLinesCovered) / coverage;
        }else{
            coverage = 0;
        }
        html += '    

<tr>';
        html += '      

<td>';
        html += '          ' + records[index].ApexClassOrTrigger.Name;
        html += '      </td>



';
        html += '      

<td style="text-align: right;" >';
        html += '          ' + Math.floor(coverage * 100) + '%';
        html += '      </td>



';
        html += '      

<td style="text-align: right;" >';
        html += '          ' + records[index].NumLinesCovered;
        html += '      </td>



';
        html += '      

<td style="text-align: right;" >';
        html += '          ' + records[index].NumLinesUncovered;
        html += '      </td>



';
        html += '    </tr>



';
    }
    html += '  </tbody>



';
    html += '</table>



';
    // HTMLに追加する
    result = $('#result');
    result.html(html);
}

酷い状態ですね。

見て分かるように、Table関連のタグの前後で改行されています。

当たり前ですが、この状態では動作しません。

タグの表記で判断していると考え、このように修正しました。

function createTable(){
    var dat = '';
    var json = '';
    var records;
    var result;
    var tbl = '';
    // データを読み込む
    dat = $('#dataSource TextArea').val();
    // JSONにする
    json = jQuery.parseJSON(dat);
    records = json.records;
    // テーブルを作成する
    tbl = $(document.createElement("table"));
    // ヘッダ部分を追加する
    tbl.append(document.createElement("thead"));
    tbl.find('thead').append(document.createElement("tr"));
    // 行にセルを追加する
    for(var i = 0; i < 4; i++){
        tbl.find('tr').append(document.createElement("td"));
    }
    $(tbl.find('tr td').get(0)).html("Name");
    $(tbl.find('tr td').get(1)).html("Coverage");
    $(tbl.find('tr td').get(2)).html("NumLinesCovered");
    $(tbl.find('tr td').get(3)).html("NumLinesUncovered");
    // 内容部分を追加する
    tbl.append(document.createElement("tbody"));
    for(var index in records){
        var coverage = 0;
        var cellIndex = 0;
        var tr;
        coverage = Number(records[index].NumLinesCovered) + Number(records[index].NumLinesUncovered);
        if(records[index].NumLinesCovered != 0){
            coverage = Number(records[index].NumLinesCovered) / coverage;
        }else{
            coverage = 0;
        }
        // 行を作成する
        tr = document.createElement("tr");
        // 行にセルを追加する
        for(var i = 0; i < 4; i++){
            $(tr).append(document.createElement("td"));
        }
        // セルに値を設定する
        $($(tr).find('td').get(0)).html(records[index].ApexClassOrTrigger.Name);
        $($(tr).find('td').get(0)).css('text-align', 'left');
        $($(tr).find('td').get(1)).html(Math.floor(coverage * 100) + '%');
        $($(tr).find('td').get(1)).css('text-align', 'right');
        $($(tr).find('td').get(2)).html(records[index].NumLinesCovered);
        $($(tr).find('td').get(2)).css('text-align', 'right');
        $($(tr).find('td').get(3)).html(records[index].NumLinesUncovered);
        $($(tr).find('td').get(3)).css('text-align', 'right');
        // テーブルに追加する
        tbl.find('tbody').append(tr);
    }
    // HTMLに追加する
    result = $('#result');
    result.html(tbl);
}

先にタグを作成してから追加するようにしています。

タグの表記を避けるようにすれば、改行等が行われないようです。

配列を使用すればもっと綺麗に書くことができるかと思いますが、やる気の問題ですね。

ソースコードを晒すのは恥ずかしいです。。

No comments.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

«
»