Jqueryでtdの要素を変更したい

このQ&Aのポイント
  • Jqueryを使用してtd要素を変更する方法を知りたい。
  • 参考サイトで提供されているソースコードを使用してバリデーションルール機能を実装しようとしています。
  • tableタグで作成した表に適用するために、エラーメッセージの表示方法を知りたい。
回答を見る
  • ベストアンサー

Jqueryでtdの要素を変更したい

以下サイトを参考に、バリデーションルール機能を実装した入力フォームを作成していました。 ttp://ascii.jp/elem/000/000/479/479507/ (html作成) ttp://ascii.jp/elem/000/000/479/479507/index-2.html(ルール実装) 参考サイトは、dlタグで表を作成されているのですが、 私は、tableタグで作成したものに適用したいと思い機能実装に挑戦しました。 エラー判定時に、  $(this).parent().prepend("<p class='error'>入力必須項目です</p>") この一文で、エラー要素の前にPタグをつけようとしているようなのですが、 tableタグのため、うまくいきません。tdとtdの間に入り表が崩れてしまいます。 【inputタグ(=ゲームタイトル名)の後ろ】に、【入力必須項目です。】と文字を追加するためには、 どのように変更すればいいのでしょうか。 (<td><input type="text" class="validate required error">入力必須項目です。</td> としたい。)  $(this).parent().prepend("<p class='error'>入力必須項目です</p>") ここを変化させたらいいと思うのですが、htmlやafter等に変更してもうまくいきません。 ttp://ascii.jp/elem/000/000/479/479507/ (html作成) ttp://ascii.jp/elem/000/000/479/479507/index-2.html(ルール実装) に紹介されている、ソースのどの部分を変更すれば実装することができるのでしょうか… ご教授お願いします。 =========現在機能を実装しようとしているhtmlソース============= <form> <table> <tr> <td>ゲームタイトル名</td> <td><input type="text" class="validate required"></td> </tr> : : </table> <input type="submit" value="ゲーム情報登録"> </form>

質問者が選んだベストアンサー

  • ベストアンサー
  • my--
  • ベストアンサー率89% (91/102)
回答No.1

インライン要素に変更してみるとか。 $(this).parent().prepend("<span class='error'>必須項目です</span>"); 上記の場合、何箇所かある $("p.error")... をすべて $("span.error")... に変更。

kureakai
質問者

お礼

早速試してみたところ無事できました。 かなりすっきりしました。 情報ありがとうございました。

関連するQ&A

  • メールフォームで必須項目の仕方

    メールフォームで必須項目を入力しないと送信できないようにするにはどうすればいいでしょうか? 現在は以下のとおりに書いてありますが、必須項目に書いてなくても送信できてしまいます。 <form method="post" action="CGI"> <h3>お問い合わせフォーム</h3> <p>*は必須項目です。</p> <table> <tbody> <tr> <th>お問い合わせ内容*</th> <td><textarea name="お問い合わせ内容" class="l" cols="40" rows="12"></textarea></td> </tr> <tr> <th>お名前(漢字)*</th> <td><input type="text" name="お名前(漢字)" class="m"></td> </tr> <tr> <th>お名前(フリガナ)*</th> <td><input type="text" name="お名前(フリガナ)" class="m"></td> </tr> <tr> <th>E-Mail*</th> <td><input type="text" name="E-mail" class="l"></td> </tr> <tr> <th>電話番号(半角)*</th> <td><input type="text" name="電話番号" class="l"></td> </tr> </tbody> </table> <input type="submit" value="  送信  " class="button"></form> また必須項目が未入力のときにエラーメッセージ(「お名前が未入力です。」など)を出したいのですがどのようにすればいいですか?

    • ベストアンサー
    • CGI
  • jqueryのthisはイベントが起きている要素?

    jqueryのthisはイベントが起きている要素を示すそうですが、 下記の例の.js-is-input-error1をthisにしても必須項目と出てきません。 こちらの例であればイベントが発生している要素とは、必須項目というテキストが出て来るspanタグがそれに該当する要素ではないのでしょうか? https://codepen.io/anon/pen/VmgPav アニメーションなら動いている要素が、イベントが発生している要素ということでしょうか? イベントが発生している要素というのがどうもはっきりわかりません。 アニメーションなら、(div.anime).animation()ならdiv.animeがイベントが発生している要素ですよね。 (button).click() { (div.anime).animation() } であればbuttonではなくdiv.animationがイベントが起きている要素ですよね?

  • このメールフォームが機能しないのは何故ですか?

    お世話になります。メールフォームを作成してCGIプログラムでメールを送信できるようにしたいと思い、以下のようにhtmlを作成しました。CGIはSYNCK GRAPHICAさんのサイトでお借りして自動返信機能付メールフォームCGIというCGIを使わせてもらいました。?http://www.synck.com/contents/download/cgi-perl/mailform.html レンタルしているサーバはロリポップです。?http://www.lolipop.jp/?mode=manual&state=hp&state2=cgi? CGIでロリポップが指定しているPERLパス・SENDMAILパスを変更してパーミッションも700に設定したのですが、何故かエラーの表示が出て、うまく作動してくれません。郵便番号自動検索機能も正常に機能しません。それでSYNCK GRAPHICAさんにどうして?と聞いたのですが、「http://www.自分のサイトアドレス/mailform.js←ここにファイルが無いためと考えられます。」という返事のみで、「何のファイルがないの?」って感じで全く分かりませんでした。初心者ゆえどこか基本的なことを見落としていると思います、どうか教えてください。 <table> <tr> <td>メールアドレス<span>*</span><p class="form">e-mail address</p></td> <td class="kakikomi"><input type="text" name="email(必須)" style="width: 300px;ime-mode: disabled;" onBlur="keepField(this.form.id)"></td> </tr> <tr> <td>確認用メールアドレス<span>*</span><p class="form">e-mail address</p></td> <td class="kakikomi"><input type="text" name="confirm_email" style="width: 300px;ime-mode: disabled;" onBlur="keepField(this.form.id)"></td> </tr> <tr> <td>お名前<span>*</span><p class="form">your name</p></td> <td class="kakikomi"><input type="text" name="お名前(必須)" style="width: 300px;ime-mode: active;" onBlur="keepField(this.form.id)"></td> </tr> <tr> <td>性別<p class="form">sex</p></td> <td class="kakikomi"><input type="radio" name="性別" value="男" onBlur="keepField(this.form.id)">男 <input type="radio" name="性別" value="女" onBlur="keepField(this.form.id)">女</td> </tr> <tr> <td>電話番号 <p class="form">telephone number</p> </td> <td class="kakikomi"><input type="text" name="電話番号" style="width: 120px;ime-mode: disabled;" onBlur="keepField(this.form.id)"></td> </tr> <tr> <td>郵便番号<p class="form">postcode</p></td> <td class="kakikomi"><input type="text" name="郵便番号" style="width: 60px;ime-mode: disabled;" onBlur="keepField(this.form.id)"> <input type="button" value="〒から住所を自動入力" name="postcode" onClick="javascript:checkPostcode('mailform','郵便番号','住所(必須)');"></td> </tr> <tr> <td>住所<span>*</span><p class="form">address</p></td> <td class="kakikomi"><input type="text" name="住所(必須)" style="width: 300px;ime-mode: active;" onBlur="keepField(this.form.id)"></td> </tr> <tr> <td>ご用件<span>*</span><p class="form">inquiry subject</p></td> <td class="kakikomi"><select name="ご用件(必須)" id="business" onBlur="keepField(this.form.id)"> <option value="" selected>下記の中から必ず選択して下さい</option> <option value="デザイン・印刷のお見積り">デザイン・印刷のお見積り</option> <option value="その他お問い合わせ">その他お問い合わせ</option> </select> </td> </tr> <tr> <td>ご用件<span>*</span><p class="form">inquiry body</p></td> <td class="kakikomi"><textarea name="ご用件(必須)" style="width: 300px;height: 140px;ime-mode: active;" onBlur="keepField(this.form.id)" rows="15" cols="30"></textarea></td> </tr> <tr> <td>送信確認<p class="form">sending confirm</p></td> <td class="kakikomi"><input type="checkbox" name="送信確認(必須)" value="送信チェック済み" onClick="keepField(this.form.id)">上記内容を確認したらチェックを入れてください</td> </tr> <tr> <td></td> <td class="kakikomi"><input type="submit" value="メールを送信する"> <input type="reset" name="reset" value="リセット"><br></td> </tr> <tr> <td></td> <td class="kakikomi"><span>*</span>は必須項目です。</td> </tr> </table> </form>

    • ベストアンサー
    • CGI
  • htmlファイルからphpファイルへの値の受け渡し

    表を使った問い合わせフォームを作成したのですが、データを受け渡す方法がわかりません!! 初めの問い合わせページは以下のようにhtmlファイルで記述しました。 この場合、次のページにデータを引き渡すphpファイルには、どうのような記述をしたら良いのでしょうか? <form method="post" action="info.php"> <table class="table margin01" width="592" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="190" align="left" bgcolor="#FFF09D">お名前 <span class="tabletext1">※必須</span></td> <td><input name="name" type="text" class="form01" id="name" /><br /> 入力例:山田 太郎 </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス <span class="tabletext1">※必須</span></td> <td><input name="mail" type="text" class="form01" id="mail" /><br /> 入力例:●●●●●●@yamada.co.jp </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス(確認) <span class="tabletext1">※必須</span></td> <td><input name="mail2" type="text" class="form01" id="mail2" /></td> </tr> <tr> <td align="left" bgcolor="#FFF09D">お問い合せ内容 <span class="tabletext1">※必須</span></td> <td> <select name="list" id="list"> <option>お問い合せ内容をお選びください</option> <option>事業内容について</option> <option>求人について </option> <option>その他</option> </select> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">内容 <span class="tabletext1">※必須</span></td> <td><textarea name="content" id="内容" cols="45" rows="5"></textarea></td> </tr> </table> <p align="center" class="margin01"> <input type="reset" value="クリア" /> <input type="submit" value="送信内容を確認する" /> </p> <input type="hidden" name="test" value="cloud" /> </form>

    • ベストアンサー
    • PHP
  • IE8でjQueryのtoggleが動作しません。

    IE8でjQueryのtoggleが動作しません。 inputをクリックすることで同じクラス名が与えられている 行を非表示/表示の切替えを行なおうとしています。 同様の内容を、 http://okwave.jp/qa/q6117684.html で質問し、IE7とIE8の互換モードでは動作できるようになりました。 metaタグで強制的に互換モードにする以外に 対処法がありましたら教えてください。 ■JavaScript <script type="text/javascript"> $(document).ready(function(){ $("#sets input").click(function () { var trshow = $(this).attr("className"); $("tr"+"."+trshow).toggle(); } ); }); </script> ■HTML <table id="sets"> <tr> <td>0001 ああああ<br /> <input type="button" class="set01" value="セット内表示/非表示" /></td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr> <td>0002 いいい<br /> <input type="button" class="set02" value="セット内表示/非表示" /></td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> </table> ■CSS .set { display: none; }

  • JQuery インプット要素 カウント減算について

    お世話になります。 JQueryを使用してインプット要素を追加・削除できるようにするアプリケーションを作成してます。 問題は、インプット要素の数を追加した合計数量を取得し削除をした場合、うまくいかない事です。 下記はコードです。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../library/js/jquery-1.6.js"></script> <link rel="stylesheet" href="../library/css/defult.css"> <link rel="stylesheet" href="../library/css/style.css"> <title>メールアドレス登録</title> <script type="text/javascript"> <!-- $(document).ready(function(){ $(function() { var count; var scntDiv = $('tbody.row'); var i = $('#row').size() + 2; $('#addScnt').live('click', function() { $('<tr><td><input type="text" style="width: 320px;" name="emailAddress_' + i +'" /></td><td><a href="#" id="addScnt">Add</a></td><td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv); count = i++; document.getElementById('cnt').value=count; return false; }); $('#remScnt').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); count = i--; document.getElementById('cnt').value=count; } return false; }); }); }); --> </script> </head> <body> <div id="content"> <h1>メールアドレス登録</h1> <form id="multi"> <table> <tbody class="row"> <tr> <td><input type="text" style="width: 320px;" name="emailAddress_1" /></td> <td><a href="#" id="addScnt">Add</a></td> </tr> </tbody> </table> <input type="hidden" name="cnt" id="cnt" /> <div id="process"> <input type="submit" class="processing" name="submit" value="次へ"/> </div> </form> </div> </body> </html>

  • 入力必須フォーム→ エラーのページへ

    アンケートのフォームを作り、このタグで入力必須の項目を入力しないと送信できないようになったのですが、エラーのページの設定がわかりません。 <input type=hidden name="required" value="email,name> エラーになった場合、エラーのページへリンクするようにするタグをおしえてください。

  • tableタグでtdタグ間が離れてしまいます

    <div align="center"> <table class="serch" cellpadding="0" cellspacing="0"> <tr> <td><input type="text" name="serch" size="50"></td> <td><input type="image" value="" src="image/serch.gif" ALT="検索" serchim"></td> </tr> </table> </div> .serch{ border-style: solid; border-width: 1px; width: 100%; background-color: #F3F3F3; text-align:center; height: 30px } input textとinput image タグの間が離れてしまいます。通常連続して表示されると思うのですが 何故離れてしまうのでしょうか?

    • ベストアンサー
    • HTML
  • JavaScriptを入れるとtdタグ内の高さが広がる

    CSSにて高さ指定もしてあるのですが、JavaScriptの記載あるtdタグの高さがIEだと広がってしまいます。 この現象はFireFoxだと現れません。 下記コードですと3段目と4段目のtdの高さが他の段に比べ広がってしまいます。 何か解決策とうございましたら、教えてください。 -----------JavaScript関数----------- <script language="javascript"> function goNext() {  if (confirm("確認")) {   return true;  } else {   return false;  } } </script> -----------html----------- <table id="tablea"> <tr><td class="b"><img src="img.jpg"/></td></tr> <tr><td>&nbsp;</td></tr> <tr><td class="b"><form action="5_4modify1_pla.html" onsubmit="return goNext();"><input name="bb" type="image" src="img.jpg" width="150" height="30"/></form></td></tr> <tr><td class="b"><form action="5_4modify1_pla.html" onsubmit="return goNext();"><input name="bb" type="image" src="img.jpg" width="150" height="30"/></form></td></tr>  <tr><td class="b"><img src="img.jpg"/></td></tr> </table> -----------CSS----------- .b {height: 30px;} #tablea { width: 180px; height: 200px;} ----------------------

    • ベストアンサー
    • HTML
  • javascriptを使用したメール送信の処理方法

    本を参考に独学で問合せフォームを作成しています。(初心者です) 未入力項目が0の時は送信ボタンを押すと(phpに)送信できるようにしたいのですが、javascriptにどのようなコードを入れればよいのでしょうか。 下記は本に記載されているコードなのですが、下記だけだと送信することが出来ません。 ご教示お願いします。 【js】の下記の部分にコードを入れればいいのかと思うのですが、どういうコードをどのように入れればいいのかわかりません。 //エラーカウントが0であれば、エラー無し if( errorCount == 0 ){ alert( '送信内容にエラーはありません。' ); }; また、下記のHTMLの最初の行の<form id="myForm" method="post" >にaction="info.php"を入れてみましたが、info.phpに飛ばないのですがどうしてなのでしょうか? 【HTML】 <form id="myForm" method="post" > <table> <tr> <th><label for="formName">名前 <span class="ind">必須</span></label></th> <td><input type="text" name="formName" id="formName"></td> </tr> <tr> <th><label for="formFurigana">ふりがな <span class="ind">必須</span></label></th> <td><input type="text" name="formFurigana" id="formFurigana"></td> </tr> <tr> <th><label for="formTell">電話番号 <span class="ind">必須</span></label></th> <td><input type="text" name="formTell" id="formTell"></td> </tr> <tr> <th><label for="formMail">メールアドレス <span class="ind">必須</span></label></th> <td><input type="text" name="formMail" id="formMail"></td> </tr> <tr> <th><label for="formInquiry">お問い合わせ内容 <span class="ind">必須</span></label></th> <td><textarea rows="9" name="formInquiry" id="formInquiry"></textarea></td> </tr> </table> <p><input type="submit" value="送信内容を確認する"></p> </form> </div> 【jsのコード】 $(function(){ function setMyForm(target){ var ERROR_MESSAGE_CLASSNAME = 'errorMsg'; //エラー時のメッセージ要素のclass名 var ERROR_INPUT_CLASSNAME = 'errorInput'; //エラー時のinput要素のclass名 var items = []; //チェック対象となるテキスト入力要素を格納した配列 //項目チェックする var checkAll = function(){ var errorCount = 0; //項目:名前のチェック checkEmptyText( items[0], '名前をご入力ください。' ); //項目:ふりがなのチェック checkEmptyText( items[1], 'ふりがなをご入力ください。' ); //項目:電話番号のチェック checkEmptyText( items[2], '電話番号をご入力ください。' ); //項目:メールアドレスのチェック checkEmptyText( items[3], 'メールアドレスをご入力ください。' ); //項目:お問い合わせ内容のチェック checkEmptyText( items[4], 'お問い合わせ内容をご入力ください。' ); //input,textareaのチェック for( var i=0; i<items.length; i++ ){ if( items[i].prop('isSuccess') == false ){ errorCount++; }; }; //エラーカウントが0であれば、エラー無し if( errorCount == 0 ){ alert( '送信内容にエラーはありません。' ); }; }; //エラーメッセージの追加 var addErrorMessage = function(selector, msg){ removeErrorMessage(selector); selector.before('<span class="'+ERROR_MESSAGE_CLASSNAME+'">'+msg+'</span>'); selector.addClass(ERROR_INPUT_CLASSNAME); }; //エラーメッセージの削除 var removeErrorMessage = function(selector){ var msgSelector = selector.parent().find('.'+ERROR_MESSAGE_CLASSNAME); if( msgSelector.length != 0 ){ msgSelector.remove(); selector.removeClass(ERROR_INPUT_CLASSNAME); }; }; //input,textareaの未入力チェック var checkEmptyText = function(selector, msg){ if( selector.val() == '' ){ addErrorMessage(selector, msg); selector.prop('isSuccess', false); }else{ removeErrorMessage(selector); selector.prop('isSuccess', true); }; }; //初期設定 var init = function(){ //submitイベントの設定 target.on({ 'submit': function(){ checkAll(); return false; } }); //input要素を配列に格納 items = [ target.find('input[name=formName]'), target.find('input[name=formFurigana]'), target.find('input[name=formTell]'), target.find('input[name=formMail]'), target.find('textarea[name=formInquiry]') ]; //input要素のプロパティを設定 $.each(items, function(index){ items[index].prop('isSuccess', false); }); //enterキーでsubmitしてしまうのを防止する target.find('input[type=text]').on({ 'keypress': function(e){ if( (e.keyCode == 13) ) return false; } }); }; init(); }; setMyForm($('#myForm')); });