質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1144閲覧

getElementIDでデータを取り、innerHTMLで載せてみたら、左右にスペースがある。

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/07/17 04:34

編集2018/07/25 01:53

getElementIDでデータを取り、innerHTMLで載せてみたら、左右にスペースがある。

該当のソースコード

HTML

1<table id="grid-command-buttons" class="table table-condensed table-hover table-striped"> 2 <thead> 3 <tr> 4 <th data-column-id="id" data-type="numeric" data-order="asc" data-width="27%">コード</th> 5 <th data-column-id="namae" data-width="27%">名称</th> 6 <th data-column-id="received" data-width="27%">割引率</th> 7 <th data-column-id="commands" data-formatter="commands" data-width="19%">編集・削除</th> 8 </tr> 9 </thead> 10 <tbody> 11 <tr data-row-id="01" class="modal-tr"> 12 <td id="Code-01" data-toggle="modal" data-target="#myModal-data" data-name="Code-01"> 13 <input type="text" value="01" />01 14 </td> 15 <td id="Meisyo-01" data-toggle="modal" data-target="#myModal-data" data-name="Meisyo-01"> 16 <input type="text" value="test" />test1 17 </td> 18 <td id="Per-01" data-toggle="modal" data-target="#myModal-data" data-name="Per-01"> 19 <input type="text" value="0" />0 20 </td> 21 <td data-column-id="commands"></td> 22 </tr> 23 <tr data-row-id="02" class="modal-tr"> 24 <td id="Code-02" data-toggle="modal" data-target="#myModal-data" data-name="Code-02"> 25 <input type="text" value="02" />02 26 </td> 27 <td id="Meisyo-02" data-toggle="modal" data-target="#myModal-data" data-name="Meisyo-02"> 28 <input type="text" value="test" />test2 29 </td> 30 <td id="Per-02" data-toggle="modal" data-target="#myModal-data" data-name="Per-02"> 31 <input type="text" value="0" />0 32 </td> 33 <td data-column-id="commands"></td> 34 </tr> 35 <tr data-row-id="03" class="modal-tr"> 36 <td id="Code-03" data-toggle="modal" data-target="#myModal-data" data-name="Code-03"> 37 <input type="text" value="01" />03 38 </td> 39 <td id="Meisyo-03" data-toggle="modal" data-target="#myModal-data" data-name="Meisyo-03"> 40 <input type="text" value="test" />test3 41 </td> 42 <td id="Per-03" data-toggle="modal" data-target="#myModal-data" data-name="Per-03"> 43 <input type="text" value="0" />0 44 </td> 45 <td data-column-id="commands"></td> 46 </tr> 47 </tbody> 48</table>

上記HTMLの
data-row-id="01"の<tr>の中の「Code-01」「Meisyo-01」「Per-01」を、

HTML

1ダイアログHTML 2<table class="center"> 3 <tr> 4 <td> 5 <table class="table table-condensed table-bordered table-hover hos_table_data" id="datamodal"> 6 <thead> 7 <tr class="active"> 8 <th class="code"><span>コード</span></th> 9 <th class="meisyo"><span>名称</span></th> 10 <th class="waribiki"><span>割引率</span></th> 11 </tr> 12 </thead> 13 <tbody> 14 <tr style="height: 30px;" data-row-id="dialogid"> 15 <td class="codetd" id="code-id"> 16 </td> 17 <td class="meisyotd" id="meisyo-id"> 18 </td> 19 <td class="waribikitd" id="per-id"> 20 </td> 21 </tr> 22 </tbody> 23 </table> 24 </td> 25 </tr> 26</table>

上記ダイアログの「code-id」「meisyo-id」「per-id」に各自データを入れたいのですが、

JavaScript

1(HTML内作成) 2 <script> 3 var tablecodeE = document.getElementById('Code-01'); 4 var dialogcodeE = document.getElementById('code-id'); 5 dialogcodeE.innerHTML = "<input type='text' maxlength='2' class='form-control fm' onclick='this.select();' style='width: 50px; text-align: right; font-size: larger; padding: 3px;' id='codeid' name='codename' placeholder='00' value='" + tablecodeE.textContent + "' />"; 6 7 var tablemeyisyoE = document.getElementById('Meisyo-01'); 8 var dialogmeisyoE = document.getElementById('meisyo-id'); 9 dialogmeisyoE.innerHTML = "<input type='text' maxlength='20' class='form-control fm' onclick='this.select(); ' style='width: 300px; text-align: right; font-size: larger; padding: 3px; ' id='meiid' name='meiname' placeholder='20字以内で入力してください' value='" + tablemeyisyoE.textContent + "' />"; 10 11 var tableperE = document.getElementById('Per-01'); 12 var dialogperE = document.getElementById('per-id'); 13 dialogperE.innerHTML = "<input type='text' maxlength='3' class='form-control fm' onclick='this.select(); ' style='width: 50px; text-align: right; font-size: larger; padding: 3px; ' id='wariid' name='wariname' placeholder='000' value='" + tableperE.textContent + "' />"; 14 </script>

を入れたところ、データは問題なく入ったのですが、
各自右に20、左に24の半角スペースが入ってしまうのですが、原因が不明です。
分かる方いらっしゃるでしょうか?

補足情報(FW/ツールのバージョンなど)

Visual studio 2017使用

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/07/17 05:09

CSSフレームワークなどご利用でしたらそのフレームワークとバージョンを追記してください。また自身で書かれたCSSがありましたらそちらもご提示ください。
guest

回答1

0

ベストアンサー

Node.textContent - Web API インターフェイス | MDN

Node.textContent プロパティは、ノードおよびその子孫のテキスト内容を表します。

とあります。
id="Code-01" の子要素のテキストは、

HTML

1 <td id="Code-01" ...> 2 <input type="text" value="01" />01 3 </td>

のtdタグの内側のテキスト全てです。
ご覧のようにインデントされたスペースも含まれます。

tablecodeEで取得したHTMLノード(td要素)の子要素(input)の内容を得たいのであれば、inputにidを指定してvalueを得る方が確実です。

投稿2018/07/17 05:12

編集2018/07/17 05:20
efcode

総合スコア422

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問