HTML テーブル値の取得

HTMLでテーブルの各行に対してラベルを隠蔽させ、そのラベルの値が0の場合のみ対象行の値を取得してリストに格納するというものを作りたいのですが、どのようにすればいいでしょうか。

各行の値をリストに追加するというところまで出来ています。

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { $("#testButton").click(function () { var memberList = []; var memberObj = { size1: null, size2: null, size3: null, size4: null, name: null,

        };

        var tr = $("table tr");
        for (var i = 0, len = tr.length; i < len; i++) {
            var row = tr.eq(i).children();
            if (row.is("th")) {
                continue;
            }
            var rowObj = Object.create(memberObj);
            for (var j = 0, m = row.length; j < m; j++) {
                var tds = row.eq(j).children();

                if ("1" == $(tds).attr("name")) {
                    rowObj.size1 = $(tds).val();
                } else if ("2" == $(tds).attr("name")) {
                    rowObj.size2 = $(tds).val();
                } else if ("3" == $(tds).attr("name")) {
                    rowObj.size3 = $(tds).val();
                } else if ("4" == $(tds).attr("name")) {
                    rowObj.size4 = $(tds).val();
                }
            }
            memberList.push(rowObj);
        }

        console.log(memberList);
    });
});
</script>

</head> <body> <style type="text/css"> .table1 th { background-color: #cccccc; } .table1 td { width: 10px; } .table1 { width: 100px; border-collapse: collapse; } </style> <table class="table1" border=1> <thead> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th>

        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" name="1" size="10" maxlength="20"></td>
            <td><input type="text" name="2" size="10" maxlength="20"></td>
            <td><input type="text" name="3" size="10" maxlength="20"></td>
            <td><input type="text" name="4" size="10" maxlength="20"></td>
          

        </tr>

        <tr>
            <td><input type="text" name="1" size="10" maxlength="20"></td>
            <td><input type="text" name="2" size="10" maxlength="20"></td>
            <td><input type="text" name="3" size="10" maxlength="20"></td>
            <td><input type="text" name="4" size="10" maxlength="20"></td>
     

        </tr>
        <tr>
            <td><input type="text" name="1" size="10" maxlength="20"></td>
            <td><input type="text" name="2" size="10" maxlength="20"></td>
            <td><input type="text" name="3" size="10" maxlength="20"></td>
            <td><input type="text" name="4" size="10" maxlength="20"></td>
            
        </tr>
        <tr>
            <td><input type="text" name="1" size="10" maxlength="20"></td>
            <td><input type="text" name="2" size="10" maxlength="20"></td>
            <td><input type="text" name="3" size="10" maxlength="20"></td>
            <td><input type="text" name="4" size="10" maxlength="20"></td>
           

        </tr>
    </tbody>

</table>
<button type="button" name="aaa" id="testButton" value="aaa"></button>

</body> </html>

Lhankor_Mhy

2017/05/27 08:01

この『ラベル』とはlabel要素( https://developer.mozilla.org/ja/docs/Web/HTML/Element/label )のことですか？

kei344

2017/05/27 09:21

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

yambejp

2017/05/29 02:06

「ラベルを隠蔽させ」→ラベルが何を意味するかわからない、「ラベルの値が0」→ラベルの値ってなんでしょう？「対象行の値」→これも意味不明、「リストに格納する」→何をしたいのでしょう？

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

回答1件

ベストアンサー

テーブルの各行に「ユーザーに見せない隠しカラムを用意し（それをラベルと称することとして？）、その内容が0の行のみ取得する」と解釈すると次のようにするのかなと思いました。

html
1<script>
2  ...
3  var tr = $("table tr");
4  for (var i = 0, len = tr.length; i < len; i++) {
5    var tri = tr.eq(i)
6    if (!tri.is(":has(td.hiddenLabel:contains('0'))")) {
7      continue;
8    }
9    var row = tri.children()
10    ...
11  }
12  ...
13</script>
14
15...
16
17<style>
18...
19.hiddenLabel {
20  display: none;
21}
22</style>
23
24...
25
26<tr>
27 <td class=".hiddenLabel">0</td>
28 <td>...</td>
29 ...
30</tr>
31<tr>
32 <td class=".hiddenLabel">1</td>
33 <td>...</td>
34 ...
35</tr>
36