jqueryのcloneでテーブルごとコピー

jqueryのcloneでtable要素ごとコピーしたいのですが、その際name属性も変更したいのですが、tableの子要素の名前属性はどのように変更したら良いのでしょうか。

例：name=event_name_01のようにしたいです。。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
		<script>
			$(function () {
				var i = 0;
				$('.add_button').click(function(){
					i++;
					$( "#clone_id" ).
						clone().
						appendTo( "#divid" );
				});
			});
		</script>
	</head>
	<body>
		<form name="form1" method="post" action="">
			<div id="divid">
				<table class="table_sample" id="clone_id">
					<tr>
						<th>日程</th>
						<td><input type="text" name="event_name" value="" class="time"/></td>
					</tr>
					<tr>
						<th>会場</th>
						<td><input type="text" name="text_name" value="" /></td>
					</tr>
					<tr>
						<th>radio</th>
						<td>
							<input type="radio" name="radio1" value="0">
							<input type="radio" name="radio2" value="1">
							<input type="radio" name="radio3" value="2">
						</td>
					</tr>
					<tr>
						<th>checkbox</th>
						<td>
							<input type="checkbox" name="chekbox1" value="0">
							<input type="checkbox" name="chekbox2" value="1">
							<input type="checkbox" name="chekbox3" value="2">
						</td>
					</tr>
				</table>
			</div>
			<input type="button" name="button" value="追加" class="add_button">
			<input type='submit' value='送信'>
		</form>
	</body>
</html>

行動規範の内容に同意します

回答2件

ベストアンサー

①cloneしたあと、各子要素について、nameを変数に入れる
②変数に連番の文字列を連結させる
③連結させた変数をnameの値にセットする

ただそれだけの話ですが、それよりも気を付けてほしいのは、#clone_idをcloneしたことによって、#clone_idというidを持つ要素が複数になってしまうことです。
ひとつのHTMLには同一のidを複数使うことはできませんので、そこを変更しないといけません。

【追記】
たとえば追加した要素が#clone_id2だとしたら

var name = '';
var i = 0;

$.each($( "#clone_id2 [name]" ),function(){
  i++
  name = $(this).attr('name') + "_0" + i;
  $(this).attr('name',name);
});

とか。tableを増やす場合にiで連番を加算します。

投稿2016/08/04 07:49

編集2016/08/04 07:58

NatsumiOki

総合スコア1298

miyagi1987

2016/08/04 07:55

回答ありがとうございます！！ ①cloneしたあと、各子要素について、nameを変数に入れるあまり詳しくないのですが、ぐぐっても良く分からなかったので、ご教授頂けますでしょうか。。

NatsumiOki

2016/08/04 07:58

回答に追記しました

行動規範の内容に同意します

clone は NatsumiOkiさんの回答を御覧いただくとして、radio の name属性がすべて個別の値になっているので、ラジオボタンとして動作しないと思います。

で、コピーして取得する予定なのであれば name属性の書き換えでなく配列で送信すればよいのでは？

HTML
1<div id="divid">
2	<table class="table_sample"><!-- idは外す -->
3		<tr>
4			<th>日程</th>
5			<td><input type="text" name="event_name_a[]" value="" class="time"/></td>
6		</tr>
7		<tr>
8			<th>会場</th>
9			<td><input type="text" name="text_name_a[]" value="" /></td>
10		</tr>
11		<tr>
12			<th>radio</th>
13			<td>
14				<input type="radio" name="radio_a[]" value="0">
15				<input type="radio" name="radio_a[]" value="1">
16				<input type="radio" name="radio_a[]" value="2">
17			</td>
18		</tr>
19		<tr>
20			<th>checkbox</th>
21			<td>
22				<input type="checkbox" name="chekbox_a[][]" value="0">
23				<input type="checkbox" name="chekbox_a[][]" value="1">
24				<input type="checkbox" name="chekbox_a[][]" value="2">
25			</td>
26		</tr>
27	</table>
28</div>
29