- ベストアンサー
質問：scriptとJSPについてのコード追加方法について
- 現在は追加ボタンを押すことで、テキストボックスがどんどん追加されていきます。最上行削除ボタンで一番上のテキストボックスは消せます。最下行削除ボタンで一番下のテキストボックスは消せます。しかし、この削除の仕様は悪く、追加された全てのテキストボックスの前にチェックボックスを入れて、チェックしたもののみを削除ボタンで消したいです。
- 質問者は、scriptとJSPを使用してテキストボックスを追加/削除したいです。現在のコードでは追加ボタンを押すとテキストボックスが追加され、上から削除ボタンで一番上のテキストボックスを、下から削除ボタンで一番下のテキストボックスを削除できます。しかしこの削除の方法は改善が必要で、追加された全てのテキストボックスの前にチェックボックスを配置し、チェックしたテキストボックスのみを削除する機能を実装したいです。
- 要望は、scriptとJSPを使用してテキストボックスの追加/削除機能を改善したいというものです。現在のコードでは追加ボタンを押すとテキストボックスが追加され、上から削除ボタンで一番上のテキストボックスを、下から削除ボタンで一番下のテキストボックスを削除できます。しかし、追加された全てのテキストボックスの前にチェックボックスを配置して、チェックしたテキストボックスのみを削除するように変更したいです。
- sadoxu
- お礼率5% (1/18)
- JavaScript
- 回答数1
- ありがとう数11
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html> <script>(function(){_=0; _ ; var E = function(p,n){return p.appendChild(document.createElement(n))}; _ ; var R = function(d,s){for (var i in s)d[i]=s[i]; return d}; _ ; function addRow() { _ ; _ ; var tbody = document.querySelector('#table1 tbody'); _ ; _ ; var tr = E(tbody,'tr'); _ ; _ ; var td = E(tr, 'td'); _ ; _ ; R(E(td, 'input'), {type:'checkbox', name:'d', checked:false}); _ ; _ ; R(E(td, 'input'), {type:'text', name:'title', value:''}); _ ; _ ; R(E(E(tr, 'td'), 'input'), {type:'text', name:'content', value:''}); _ ; _ ; R(E(E(tr, 'td'), 'input'), {type:'text', name:'status', value:''}); _ ; } _ ; function delRows() { _ ; _ ; var rows = document.querySelectorAll('#table1 tbody tr'); _ ; _ ; Array.prototype.slice.apply(rows).filter(function(row){ _ ; _ ; _ ; return row.querySelector('input[name="d"]').checked; _ ; _ ; }).forEach(function(row){ _ ; _ ; _ ; row.parentNode.removeChild(row); _ ; _ ; }); _ ; } _ ; addEventListener('click', function(ev){ _ ; _ ; var b = ev.target; _ ; _ ; if (!b || b.tagName != 'BUTTON') return; _ ; _ ; if (b.name == 'table1add') addRow(); else if(b.name == 'table1del') delRows(); _ ; }, false); })()</script> <table id=table1 border> <thead><tr><th>title<th>content<th>status <tbody> </table> <button type=button name=table1add>add 1 line</button> <button type=button name=table1del>delete checked lines</button>
