Javascriptで文字のチェックをしたい

###前提・実現したいこと
こんばんは
Javascriptのifを使って、文字のチェックをしたいのですがハマってしまいました。
viewのtable（表）があって、左の項目(商品名)が空白とき、右の項目(金額)と左の項目のどちらとも非表示にしたいのですがなかなか実現できずにいます。。

###ソースコード

[view]
<table>
  <tbody>
    <tr>
      <th><p3><%= @other_name %></p3></th>
      <td><p3><%=number_with_delimiter @other %>円</p3></td>
    </tr>
    <tr>
      <th><p4><%= @other_name1 %></p4></th>
      <td><p4><%=number_with_delimiter @other1 %>円</p4></td>
    </tr>
  </tbody>
</table>

[js]
$(function(){
    if ($('table th p3').val() === ""){
    $('table td p3').css({'display':'none'});
  }
});
$(function(){
    if ($('table th p4').val() === ""){
    $('table td p4').css({'display':'none'});
  }
});

###補足情報
ifでth p3が空白の時、td p3を非表示にするコードを記述したのですがうまくいかずにいます。
どうぞよろしくお願いいたします。
※viewはrailsで記述しています。

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

回答3件

ベストアンサー

Ruby On Railsを使用しているという前提で回答しますが、わざわざJavaScriptを使わなくても、erbファイルを以下のとおり修正すればOKではないでしょうか？

ruby
1<table>
2  <tbody>
3    <% unless @other_name.blank? %>
4      <tr>
5        <th><p3><%= @other_name %></p3></th>
6        <td><p3><%=number_with_delimiter @other %>円</p3></td>
7      </tr>
8    <% end %>
9    <% unless @other_name1.blank? %>
10      <tr>
11        <th><p4><%= @other_name1 %></p4></th>
12        <td><p4><%=number_with_delimiter @other1 %>円</p4></td>
13      </tr>
14    <% end %>
15  </tbody>
16</table>

** <% unless @other_name.blank? %>を追加することで、@other_nameが空でなければ<tr>タグ以下を表示させるようにしています。

あと、最初の回答の

どのp要素か判定するために番号をつけているのならid属性かclass属性を使いましょう。

も踏まえてHTMLを記述してください。

投稿2017/05/09 14:18

s-show

総合スコア203

以下のようにeach関数を使って行ってみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<table>
15    <tbody>
16    <tr>
17        <th>
18            <p><%= @other_name %></p>
19        </th>
20        <td>
21            <p><%=number_with_delimiter @other %>円</p>
22        </td>
23    </tr>
24    <tr>
25        <th>
26            <p><%= @other_name1 %></p>
27        </th>
28        <td>
29            <p><%=number_with_delimiter @other1 %>円</p>
30        </td>
31    </tr>
32    </tbody>
33</table>
34
35<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
36<script>
37    $(function () {
38        $("tr th.p3, tr th.p4").each(function () {
39            if ($(this).text() === "") {
40                $(this).css({"display": "none"});
41            }
42            if ($(this).text() === "") {
43                $(this).css({"display": "none"});
44            }
45        });
46    });
47</script>
48</body>
49</html>