質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1812閲覧

JSで追加したtableの行のinputで、datepickerが使用できない

sakura-shi

総合スコア93

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/08/11 11:40

編集2018/08/12 08:13

#やりたいこと
jQueryで、テーブルの行を追加、削除するというフォームを作成しています。
その後、追加した行のinputでdatepickerを使用したいのですが、
一番上の行しか、datepickerが使用できません。
どこを修正したらよいでしょうか?

HTML

1<table> 2<tr> 3 <!-- 他のフォーム内の項目の行 --> 4 <!-- datepicker を使用しているinput項目も有 --> 5 <!-- datepickerは正常に使用できている --> 6</tr> 7<tr class="type_detail"> 8  <th>テーブル</th> 9 <td colspan="5"> 10 <table class="table-form" id="t_detail"> 11 <thead> 12 <tr> 13 <td> 14 <button name="plus" id="plus" type="button"><img src="img/icon_plus.png"></button> 15 </td> 16 <td>日付</td> 17 <td>数量</td> 18 <td>チェック</td> 19 </tr> 20 </thead> 21 <tbody> 22 <tr style="display:none;"> 23 <td> 24 <button name="minus" class="minus" type="button"><img src="img/icon_minus.png"></button> 25 </td> 26 <td> 27 <input class="datepicker" style="width:20%;" type="text" name="t_date[]" data-order-status /> 28 </td> 29 <td> 30 <input style="width:50%;" type="text" name="amount[]" /> 個 31 </td> 32 <td> 33 <input type="checkbox" name="t_check[]"> 34 </td> 35 </tr> 36 </tbody> 37 </table> 38 </td> 39</tr> 40</table> 41<input type="submit" value="submit">

JS

1jQuery(function($) { 2 $("#plus").on("click", function() { 3// $("#t_detail tbody tr:first-child").clone(true).appendTo("#t_detail tbody"); 4// $("#t_detail tbody tr:last-child").css("display", "table-row"); 5 6 addRow = function () { 7 var lastRow = $('#t_detail tbody > tr:last').after('<tr><td><button name="minus" class="minus" type="button"><img src="img/icon_minus_alt.png" width="18" height="18"></button></td><td><input class="datepicker" style="width:20%;" type="text" name="t_date[]" data-order-status /></td><td><input style="width:50%;" type="text" name="t_amount[]" autocomplete="off" /> 個</td><td><input type="checkbox" name="t_check[]"></td></tr>'); 8 console.log(lastRow); 9 } 10 11addRow(); 12 13 $(".minus").on("click", function() { 14 $(this).parent().parent().remove(); 15 }); 16 }); 17});

■datepickerの使用のためには、以下のように行っています。

JS

1 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 2 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 3 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

https://jqueryui.com/datepicker/ を参照している

JS

1<script> 2$.datepicker.setDefaults($.datepicker.regional['ja']); 3$(function() { 4 $('input[name^="t_date"]').datepicker({ 5 changeMonth: true, 6 changeYear: true, 7 yearRange: ('-2:+2'), 8 showButtonPanel: true 9 }); 10 }); 11</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/08/11 12:09

プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)
guest

回答2

0

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Sample</title> 6 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 7 <style type="text/css"> 8 table { 9 border-collapse: collapse; 10 } 11 table th, table td { 12 border: 1px solid #CCC; 13 } 14 </style> 15 </head> 16 <body> 17 <table> 18 <thead> 19 <tr> 20 <th> 21 <button id="plus" type="button">+</button> 22 </th> 23 <th></th> 24 <th></th> 25 <th></th> 26 </tr> 27 </thead> 28 <tbody> 29 <tr> 30 <td> 31 <button class="minus" type="button"> 32 - 33 </button> 34 </td> 35 <td> 36 <input class="datepicker" type="text" name="t_date[]" /> 37 </td> 38 <td> 39 <input type="text" name="amount[]" />40 </td> 41 <td> 42 <input type="checkbox" name="t_check[]"> 43 </td> 44 </tr> 45 </tbody> 46 </table> 47 <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script> 48 <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 49 <script type="text/javascript"> 50 51 function add_row() { 52 let row = $('<tr>'); 53 $('<td>').append( 54 $('<button>').addClass('minus').prop('type', 'button').text('-') 55 ).appendTo(row); 56 $('<td>').append( 57 $('<input>') 58 .addClass('datepicker') 59 .prop({'type': 'text', 'name': 't_date[]'}) 60 .datepicker() 61 ).appendTo(row); 62 $('<td>').append( 63 $('<input>').prop({'type': 'text', 'name': 'amount[]'}) 64 ).appendTo(row); 65 $('<td>').append( 66 $('<input>').prop({'type': 'checkbox', 'name': 't_check[]'}) 67 ).appendTo(row); 68 69 $("table tbody").append(row); 70 } 71 72 function del_row(element) { 73 // 最後の1行は削除しない 74 if ($("table tbody tr").length === 1) { 75 return; 76 } 77 element.remove(); 78 } 79 80 $(function () { 81 $("#plus").on('click', function () { 82 add_row(); 83 }); 84 $("tbody").on('click', '.minus', function () { 85 let row = $(this).parents('tr'); 86 del_row(row); 87 }); 88 89 // datepicker 90 $('.datepicker').datepicker(); 91 }); 92 </script> 93 </body> 94</html>

投稿2018/08/12 09:06

編集2018/08/12 09:09
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

http://jqueryui.com/datepicker/
使い方を見ると、$("対象要素のセレクタ").datepicker(); を実行することになってますが、どこかでやってますか?
要素を追加したなら追加した要素すべてに対して、datepickerを適用する処理が必要になります。

投稿2018/08/12 04:46

spookybird

総合スコア1803

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-shi

2018/08/12 08:16

ありがとうございます。 質問内容に追記しました。回答のある前に記述しています。 2行目以降でdatepickerが利用できない、原因と対策はおわかりですか?
spookybird

2018/08/12 13:13

scriptタグの中に記述された内容だと即時実行になっていますので、scriptタグのレンダリング時に一度だけ実行されて(厳密に言うと実行タイミングは完全にレンダリング時ではなく微妙にズレますがこの際それはどうでもいいとして)、その時点で発見できるinputタグにのみdatepickerが適用されるだけです。 なので最初の1つだけにdatepickerが適用されています。 初期レンダリング終了後に追加した要素に対しては、追加したあとに追加した要素に対して再度、datepicker適用の処理を実行する必要があります。 つまりaddRow関数の中で、追加要素に対して`.datepicker()`を実行しなければなりません。
sakura-shi

2018/08/15 09:20

ありがとうございます。もう一人の回答者と同じですね。とても助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問