前提・実現したいこと
jQueryを使用してHTML要素を書き換えるコードを書いています。
ボタンを押下するとテーブルに行を追加するという単純なものですが、
Strutsタグが記述されている要素を追加するため要素内にダブルクォートやシングルクォートが混在しています。
テンプレートリテラルを用いてバッククォートで囲む方法で実装ができたのですが、要件にIE11対応が含まれているため、ES6の記述方法が使えません。
ダブルクォートやシングルクォートが混在している要素をjavascriptでDOM操作する方法をご教示ください。
以下のソースコードはテンプレートリテラルを用いて動作している状態のコードです。
該当のソースコード
javascript
1$("#addRow").click(function(event) { 2 var index = $("#tableTest tr:last td").eq(0).text(); 3 var arraySeq = index == ""? 0 : index; 4 index++; 5 var row = `<tr> 6 <td>` + index + `</td> 7 <s:hidden name="row[` + arraySeq + `].rowNo" value="` + index + `" /> 8 <td><s:checkbox name="row[` + arraySeq + `].aaa" value="%{aaa}" /></td> 9 <td><s:textfield name="row[` + arraySeq + `].bbb" value="%{bbb}" /></td> 10 <td><s:textfield name="row[` + arraySeq + `].ccc" value="%{ccc}" /></td> 11 <td> 12 <s:select name="row[` + arraySeq + `].ddd" value="%{ddd}" 13 list="#{'':'', 14 'a':'あいうえお', 15 'k':'かきくけこ', 16 's':'さしすせそ', 17 't':'たちつてと', 18 'n':'なにぬねの', 19 'h':'はひふへほ', 20 'm':'まみむめも', 21 'y':'やゆよ', 22 'r':'らりるれろ', 23 'w':'わをん'}"> 24 </s:select> 25 </td> 26 <td><s:textfield name="row[` + arraySeq + `].eee" value="%{eee}" /></td> 27 </tr>`; 28 29 $("#tableTest").append(row); 30});
試したこと
JavaScriptで文字列を複数行に記述するやり方
https://qiita.com/koshihikari/items/f6a90d8a19bda831d879
Javascriptで複数行を代入するのにベストな記述方法
https://www.redwoodcity.jp/blog/javascript/p20150116120000/
IE11では、jsのテンプレートリテラル(バッククォートで挟むやつ)が効かない。ので別対応。
https://qiita.com/dev4kj/items/5a1dd3859d64a1637d87
補足情報(FW/ツールのバージョンなど)
Struts2
Eclipse 4.4
jQuery 3.3.1
回答5件
あなたの回答
tips
プレビュー