1478236176 javascriptのjquery.jPrintArea.jsを使ってボタンをおした時画面の表示させたテーブルの指定箇所の部分のみ印刷を行いたいと考えております。

配列からデータを読み取り表(テーブル)にしています。
jquery.jPrintArea.jsを使うことで
<div id="printarea">で囲んだ部分のみの印刷に成功しました。

しかし、表のセル幅を固定(指定)しているしているにもかかわらず印刷するとなぜか幅が微妙にずれてしまいます。なぜなのでしょうか?セル幅をA41枚に収まるように狭くしても同じです。また印刷するとヘッダーにURL、フッダーに日付が印刷されてしまいます。これを消す方法はありますか?

こちらにコードを書きました。
https://jsfiddle.net/kajironpu/a7b6v0co/

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2016/11/11 14:10:03

ベストアンサー

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

それぞれのセルの幅を足した合計が全体の幅を超えているために、TABLE タグの自動調整が効いているのだと思います。

縦を合わせるのに一番単純な方法は、一行毎に TABLE を作るのではなく、全体をひとつの TABLE にすることです。
また、セルの幅や背景色など、見栄え的なものはタグの属性に直接埋め込むのではなく、CSS に切り出しておくと、「見た目を調整したかっただけなのにテーブル全体が表示されなくなった」的な地雷を回避できる可能性が高くなります。

以上をふまえて、

  • ひとつの TABLE タグで構成する
  • 見出し(「リスト」)は、TABLE の CAPTION タグを使う
  • 見出し行は TH タグを使う
  • 列の幅は COL タグを使う
  • 見栄え的なものは、CSS で記述する
  • ひとつの長い文字列でタグを書くのではなく、構成要素単位にばらして書く(方が、見やすいと思います)

というふうにしてみました。

javascript

var Array1 = ["apple","car","dog","international scppl"];
var Array2 = ["りんご","車","犬","国際学校"];

/* ★ここから */
var str1 =
    '<caption>リスト</caption>' +
    '<colgroup>' +
    '<col class="col_1">' +
    '<col class="col_no">' +
    '<col class="col_eng">' +
    '<col class="col_jpn">' +
    '<col class="col_prac">' +
    '<col class="col_prac">' +
    '<col class="col_prac">' +
    '</colgroup>' +
    '<tr>' + 
    '<th></th>' + 
    '<th>'+'No.'+'</th>' +
    '<th>'+'英語'+'</th>' +
    '<th>'+'日本語'+'</th>' +
    '<th>練習①</th>' +
    '<th>練習②</th>' +
    '<th>練習③</th>' +
    '</tr>';

var str2 = ''
for (var i=0 ; i<Array1.length ; i++) {
    str2 +=
        '<tr>' +
        '<TD>' +
        '<TD>'+[i+1]+'</td>' +
        '<TD>'+Array1[i]+'</td>' +
        '<TD>'+Array2[i]+'</td>' +
        '<TD></td>' +
        '<TD></td>' +
        '<TD></td>' +
        '</tr>';
}

var div = document.getElementById("list")
div.innerHTML =
    '<TABLE class="list" border=1 cellpadding=8 cellspacing=0 >' +
    str1 +
    str2 +
    '</TABLE>';
    /* ↑ひとつの TABLE にする */

/* ★ここまでを変更してます */

/////指定範囲印刷するjquery   <div id="printarea">で囲んだ箇所が印刷される

jQuery.noConflict();
var j$ = jQuery;
jQuery(document).ready(function($){
  $('#btn_print').click(function(){
    $.jPrintArea("#printarea");
  });
});
/////////////////////////

CSS

table.list caption {
    margin-left: auto;
    margin-right: auto;
    width: 8ex;
    padding: 9px;
    background-color: #ffff66;
    border: 1px solid gray;
}
table.list th {
    background-color: #ffff66;
}
table.list td {
    background-color: #ffffff;
}
table.list {
    text-align: center;
    font-size: large;
}
table.list .col_1 {
    width: 10px;
}
table.list .col_no {
    width: 40px;
}
table.list .col_eng {
    width: 150px;
}
table.list .col_jpn {
    width: 200px;
}
table.list .col_prac {
    width: 150px;
}


jsFiddle で試したのがこちら。
https://jsfiddle.net/a_kuma3/c2k2jdka/

他7件のコメントを見る
id:a-kuma3

↑の文字置換の/ken/ という部分に配列を指定するにはどうしたらいいのでしょうか?

「配列」ではなくて「変数」ですね。
RegExp オブジェクトを使います。

var ken ="in my opinion"
var str ="In my opinion, I love KEN."

//文字を置換する
str=str.replace(new RegExp(ken, "ig"),"私の意見では");

RegExp - JavaScript | MDN
以下の三つは、同じ正規表現のオブジェクトを表します。

/in my opinion/ig

new RegExp("in my opinion", "ig")

var ken = "in my opinion";
new RegExp(ken, "ig")
2016/11/08 11:43:44
id:kajironpu

すみません、変数でした。早速有り難うございます。RegExp オブジェクトというのがあるのですね。
いろいろ自分で調べていても、変数(配列)の場合の具体的な例がなかなか見つけられず行き詰まっておりました。
その使い方の例ととても分かりやすい解説ありがとうございます。これを配列に応用して試しております。どうもありがとうございました。

2016/11/08 14:14:34

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません