クローンで生成した、tableのtd要素のタグの内容(inputタグのclassやname)を変更したい

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件

ベストアンサー

とりあえずなんとなく動くバージョンです
もっと効率化できるとは思いますが、書かれている仕様をそのまま実現しておきました
一部手抜きがあるので仕様が増えると動作が安定しないかもしれません

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    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
8    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
9<script>
10$(function(){
11  $('.btn-success').on('click',function(){
12    var tbody=$(this).parents('table').first().find('tbody').first();
13    var clone_tr=tbody.find('tr').first().clone();
14    var max_data_id=0;
15    tbody.find('button').each(function(){
16      var id=parseInt($(this).data('id'));
17      if(id!==null && id>max_data_id) max_data_id=id;
18    });
19    var max_textarea_num=0;
20    tbody.find('textarea').each(function(){
21      var num=parseInt($(this).attr('name').match(/\[([0-9]+)\]/)[1]);
22      if(num!==null && num>max_textarea_num) max_textarea_num=num;
23    });
24    tbody.append(clone_tr);
25    clone_tr.find('button').attr('data-id',max_data_id+1);
26    clone_tr.find('textarea').attr('name','commentInfo['+(max_textarea_num+1)+'].message');
27  });
28  $('#sample1_table').on('click', '.confirm-delete', function (e) {
29    var id = $(this).data('id');
30    $('#myModal').data('id', id).modal('show');
31  });
32  $('#btnYes').click(function () {
33    var id = $('#myModal').data('id');
34    $('[data-id=' + id + ']').parents('tr').remove();
35    $('#myModal').modal('hide');
36  });
37});
38</script>
39</head>
40<body>
41    <div id='myModal' class='modal hide fade' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
42        <div class='modal-header'>
43            <button type='button' class='close' data-dismiss='modal' aria-hidden='true'></button>
44            <h3 id='myModalLabel'>delete</h3>
45        </div>
46        <div class='modal-body'>
47            <p>Are you sure you want to delete it?</p>
48        </div>
49        <div class='modal-footer'>
50            <button class='btn' data-dismiss='modal' aria-hidden='true'>NO</button>
51            <button data-dismiss='modal' class='btn btn-danger' id='btnYes'>YES</button>
52        </div>
53    </div>
54    <table align='center'>
55        <tbody id='sample1_table'>
56            <tr>
57                <td>
58                    <input type='text' />
59                    <br />
60                    <textarea name='commentInfo[0].message' class='form-control' rows='6' cols='95' maxlength='100'></textarea>
61                    <br />
62                    <button class='confirm-delete btn btn-danger red-stripe' role='button' data-toggle='modal' data-id='1'>DELETE</button>
63                </td>
64            </tr>
65        </tbody>
66        <tr><td><button class='btn btn-success'>ADD</button></td></tr>
67    </table>
68</body>
69</html>