tableのtd要素の中身をコピーし、その中身(classやname)を書き換えたい。これ以上説明がちょっとむずかしいので、ソースを載せます。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta http-equiv='content-type' content='text/html; charset=UTF-8'> 5 <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> 6 <link href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet'> 7</head> 8<body> 9 <div id='myModal' class='modal hide fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> 10 <div class='modal-header'> 11 <button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button> 12 <h3 id='myModalLabel'>delete</h3> 13 </div> 14 <div class='modal-body'> 15 <p>Are you sure you want to delete it?</p> 16 </div> 17 <div class='modal-footer'> 18 <button class='btn' data-dismiss='modal' aria-hidden='true'>NO</button> 19 <button data-dismiss='modal' class='btn btn-danger' id='btnYes'>YES</button> 20 </div> 21 </div> 22 <table align='center'> 23 <tbody id='sample1_table'> 24 <tr> 25 <td> 26 <input type='text' /> 27 <br /> 28 <textarea name='commentInfo[0].message' class='form-control' rows='6' cols='95' maxlength='100'></textarea> 29 <br /> 30 <button class='confirm-delete btn btn-danger red-stripe' role='button' data-toggle='modal' data-id='1'>DELETE</button> 31 </td> 32 </tr> 33 </tbody> 34 <tr><td><button onclick='insertRow();' class='btn btn-success'>ADD</button></td></tr> 35 </table> 36 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script> 37 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 38 <script type='text/javascript'> 39 40 function insertRow() { 41 var table = document.getElementById("sample1_table"); 42 var row = table.insertRow(-1); 43 var cell1 = row.insertCell(-1); 44 45 var row_len = table.rows.length; 46 var collection = table.rows; 47 var tr = collection.item(0); 48 var td = tr.cells.item(0); 49 50 cell1.innerHTML = td.innerHTML; 51 } 52 53 $('#sample1_table').on('click', '.confirm-delete', function (e) { 54 var id = $(this).data('id'); 55 $('#myModal').data('id', id).modal('show'); 56 }); 57 58 $('#btnYes').click(function () { 59 var id = $('#myModal').data('id'); 60 $('[data-id=' + id + ']').parents('tr').remove(); 61 $('#myModal').modal('hide'); 62 }); 63 64 </script> 65</body> 66</html>
ADDボタンを押すと、sample1_tableの0番目のtd要素がコピーされ、テーブルのセルとして追加されるようになっています。クローンとして全く同じものがsample1_tableに生成されるところまではできましたが、私がしたいのは生成されたtextareaタグのnameを変更したり、DELETEボタンのdata-id番号を変更したり、そのtd要素のタグの内容を変更したいです。何度も試しましたが、私の技術力では実装できないままです。だれかそのtd要素のタグの内容を変更の仕方がわかる方、ご教授お願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/15 04:59
2016/11/23 06:08