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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

552閲覧

テキストエリアに入れた文字を表にセットする際、指定の背景色の場合は飛ばしてセットしたい。2

masshima

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/01/14 07:50

編集2021/01/14 07:56

前提・実現したいこと

お世話になります。本日2度目の質問です。

JavaScriptで、テキストエリアに入れた文字列を表テーブルの中にセットしたいです。
その際、表のセルの色がrgb(171,209,198)ならば、そのセルを飛ばして値をセットしたいのですがうまく行きません。
前回の質問で、テーブルのtdタグにclassを指定することで、そのセルを飛ばして値をセットすることができるようになりました。
しかし、テーブル全体のセルの数と、入力するデータ数に差がある場合に思った通りに動いてくれません。(全てのセルに同じ値が入ったり、データが一つ飛ばしで入力されてしまったり)

該当のソースコード

html

1<table id="app-table"> 2 <tr> 3 <td></td> 4 <td></td> 5 <td></td> 6 </tr> 7</table> 8 9<div> 10 <textarea id="nameArea"></textarea> 11 <button onclick="nameSet()">名前セット</button> 12</div>

JavaScript

1//名前格納用配列 2var tableArray = []; 3var allTableArray = []; 4 5//テキストエリアの名前をテーブルにセット 6function nameSet(){ 7 var tdElem = $('table#app-table td'); 8 9 //clickedTdがクラス指定されていないtd要素を配列に取得 10 tdElem.each (function() { 11 allTableArray.push($(this).html()); 12 if($(this).hasClass('clickedTd')){ 13 return true; 14 } 15 tableArray.push($(this).html()); 16 }); 17 18 var tableArrayLength = tableArray.length; 19 var allTableArrayLength = allTableArray.length; 20 21 //テキストエリアの値を配列namesに格納 22 var name = document.getElementById('nameArea').value; 23 var names = name.split('\n'); 24 25 //配列に格納 26 if(names.length > tableArrayLength){ 27 alert('人数が多すぎます。セルの数を増やしてください。'); 28 }else{ 29 for(var i = 0; i < tableArrayLength; i ++){ 30 tableArray[i] = names[i]; 31 } 32 33 //td要素に配列の値を戻す 34 for(var j = 0; j < allTableArrayLength; j++){ 35 if(tdElem.hasClass('clickedTd')){ 36 tdElem.html(""); 37 }else{ 38 tdElem.html(tableArray[j]); 39 } 40 } 41 } 42} 43 44/* 不要セルの判定 */ 45//クリックで色変更。ホバー時の色変更はcssで実行 46//clikedTdクラスを付与することでクリックを判定 47$('table#app-table td').bind('click', function(e) { 48 $(e.currentTarget).css('background-color','rgb(171,209,198)'); 49 $(e.currentTarget).toggleClass("clickedTd"); 50})

試したこと

おそらく、

html

1 //td要素に配列の値を戻す 2 for(var j = 0; j < allTableArrayLength; j++){ 3 if(tdElem.hasClass('clickedTd')){ 4 tdElem.html(""); 5 }else{ 6 tdElem.html(tableArray[j]); 7 } 8 }

この部分の記述がダメで、うまくいっていないのではないかと思っています。
clickedTdクラスがある場合は、tdElemに要素を追加しない
というような動きをさせるにはどのような書き方で実現できるのでしょうか?
each文などを使うのでしょうか...?

最近プログラミングの勉強を始めて、アウトプットとして作成しています。

説明が分かりづらかったら申し訳ございません。
どうかお力をお貸しいただけませんでしょうか。
どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

tdElem は、複数の<td>が入ったjQueryオブジェクトです。このオブジェクトにhasClass('clickedTd')を呼んだ場合、複数の<td>のうちどれか1つに'clickedTd' クラスが付いていると真となります。

javascript

1 tdElem.each(function() { 2 if(!$(this).hasClass('clickedTd') && names.length > 0) 3 $(this).text(names.shift()); 4 });

で動くのではないでしょうか。


参考までに、関数nameSet()の無駄な処理を削ると以下のようになります。
(動作確認していません)

javascript

1function nameSet(){ 2 const tdList = $('table#app-table td:not(.clickedTd)'); 3 //テキストエリアの値を配列namesに格納 4 const names = $('#nameArea').val().split('\n'); 5 6 //配列に格納 7 if (names.length > tdList.length) { 8 alert('人数が多すぎます。セルの数を増やしてください。'); 9 } else { 10 tdList.each(function() { 11 if (names.length > 0) 12 $(this).text(names.shift()); 13 }); 14 } 15}

投稿2021/01/14 08:04

編集2021/01/14 08:35
int32_t

総合スコア20661

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

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

masshima

2021/01/15 02:01

ありがとうございます! 理解できました。 また、nameSet()に関しても、こんなに簡潔にかけるとは思いませんでした。 もっと勉強します。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問