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使用
回答1件
あなたの回答
tips
プレビュー