2016-11-15 6 views
0

私は、次のHTMLテーブルを持っている:ここでは私のjqueryコードは、私が予想しているよりも多くの行をピックアップするのはなぜですか?

<table id="tbltimeconditions" class="table table-bordered table-hover tcdata"> 
    <tbody> 
    <tr> 
     <td colspan="6"> 
     <h3>Time Conditions&nbsp;&nbsp;<input type="button" name="enabletc" id="enabletc" class="btn btn-primary" value="Edit Time Conditions"></h3> 
     <button id="addtc" type="button" class="btn btn-success btn-circle tctamper" style=""><i class="fa fa-plus"></i></button> 
     </td> 
     <!--<td class="tctamper"></td>--> 

    </tr> 
    <input type="hidden" id="tc_dirty" name="tc_dirty" value="true">    
    <tr> 
     <td> 
     <button id="del_tc1" type="button" class="btn btn-warning btn-circle deletetcrow"><i class="fa fa-times"></i></button>&nbsp;&nbsp;TC 1:</td> 
     <td> 
     <input class="form-control starttc " type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime1"> 
     </td> 
     <td> 
     <input class="form-control " type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime1"> 
     </td> 
     <td> 
     <input class="form-control " type="input" placeholder="Extension" name="extension1"> 
     </td> 
     <td> 
     <input class="form-control " type="input" placeholder="Domain" name="domain1"> 
     </td> 
     <td colspan="2"> 
     <label class="checkbox-inline"><b>Days of Week:</b></label> 
     <input class="checkbox-inline " type="checkbox" id="dow_m1" name="dow_m1">Mon&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_t1" name="dow_t1">Tue&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_w1" name="dow_w1">Wed&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_r1" name="dow_r1">Thu&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_f1" name="dow_f1">Fri&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_s1" name="dow_s1">Sat&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_n1" name="dow_n1">Sun&nbsp;</td> 
    </tr> 
    <tr id="submitbtnsection"> 
     <td colspan="6" align="center"> 
     <input type="submit" name="submit" id="submit" class="btn btn-primary" value="Save">&nbsp;&nbsp; 
     <input type="button" name="cancel" id="cancel" class="btn btn-warning submit" value="Cancel">&nbsp;&nbsp; 
     <input type="button" name="unassign" id="unassign" class="btn btn-warning" value="Unassign DID"> 
     </td> 
    </tr> 

    </tbody> 
</table> 

は、私は、ユーザーが入力したデータのすべての行を見つけなければならないjqueryのロジックです:

var rowCount = $('#tbltimeconditions tr').length; 
console.log(rowCount + " is the rowCount"); 
if (rowCount >= 3) {  // 3 because 1 for heading, 1 for '+' button row, 1 row for submit button 

     $('.tcdata tr').each(function (i, row) { 
      var $row = $(row);       
      var $ext = $row.find('input[name*="extension"]');   
console.log($ext.val() + " is the ext") ;    
      var $start = $row.find('input[name*="starttime"]'); 
      var $end = $row.find('input[name*="endtime"]'); 
      var $domain = $row.find('input[name*="domain"]'); 

      if (!$start.val() || !$end.val() || !$domain.val()) { 
         $(".emessbox").html("Whoops! Every time condition must have a start/end time, and a domain");       
         e.preventDefault();    
         return; 
      } 
      //check days of week. 
      var $dow_m = $row.find('input[name*="dow_m"]'); 
      var $dow_t = $row.find('input[name*="dow_t"]'); 
      var $dow_w = $row.find('input[name*="dow_w"]'); 
      var $dow_r = $row.find('input[name*="dow_r"]'); 
      var $dow_f = $row.find('input[name*="dow_f"]'); 
      var $dow_s = $row.find('input[name*="dow_s"]'); 
      var $dow_n = $row.find('input[name*="dow_n"]'); 
      if ((!$dow_m[0].checked) && (! $dow_t[0].checked) && (!$dow_w[0].checked) && (!$dow_r[0].checked) && (!$dow_f[0].checked) && (!$dow_s[0].checked) && (!$dow_n[0].checked)) { 

       if (/^dow_[mtwrfsn]{1}[0]{1}$/.test($dow_m.attr("name"))== true ) { 

        $(".emessbox").html("Whoops! Every time condition must have a day of week assign to it"); 
        e.preventDefault();    
        //console.log('abuot to existin here'); 
        return; 
       } 
      } 

が問題

実際の行のデータのみをフィルタリングするように作成したjqueryコードは、必要以上に返しています。したがって、上記のレンダリングされたHTMLテーブルの例では、私は実際にデータの1行を持っている...しかし、テーブル内のすべての3つの行をキャプチャし、出力を返します:

undefined is the ext 
8659111 is the ext 
undefined is the ext 

質問

を私がすることを考えましたこの行は:

$('.tcdata tr').each(function (i, row) { 

は、クラス "tcdata"を持つテーブル内のすべての行を返します。
そして私は、この行と思った:

  var $ext = $row.find('input[name*="extension"]');   

は、各行をフィルタリングし、唯一の私は、この場合のパターンに一致する名前、「拡張子」と入力コントロールを持つ行を与えるだろう。

しかし、それは明らかに私が望む以上に多くを与えているので、コードは失敗しています。 私の間違いを見つけることができません。

何か提案がありがとうございます。

答えて

0

あなたがclass必要<tr>タグでtcdataとを持っている必要があり、あなたが$('tr.tcdata').each(function (i, row) {

に、それはあなたが必要なだけの行を返します。この道を$('.tcdata tr').each(function (i, row) {これを変更する必要があります。

JS

$('tr.tcdata').each(function (i, row) { ... }); 

HTML

<tr class="tcdata"> 
     <td> 
     <button id="del_tc1" type="button" class="btn btn-warning btn-circle deletetcrow"><i class="fa fa-times"></i></button>&nbsp;&nbsp;TC 1:</td> 
     <td> 
     <input class="form-control starttc " type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime1"> 
     </td> 
     <td> 
     <input class="form-control " type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime1"> 
     </td> 
     <td> 
     <input class="form-control " type="input" placeholder="Extension" name="extension1"> 
     </td> 
     <td> 
     <input class="form-control " type="input" placeholder="Domain" name="domain1"> 
     </td> 
     <td colspan="2"> 
     <label class="checkbox-inline"><b>Days of Week:</b></label> 
     <input class="checkbox-inline " type="checkbox" id="dow_m1" name="dow_m1">Mon&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_t1" name="dow_t1">Tue&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_w1" name="dow_w1">Wed&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_r1" name="dow_r1">Thu&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_f1" name="dow_f1">Fri&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_s1" name="dow_s1">Sat&nbsp; 
     <input class="checkbox-inline " type="checkbox" id="dow_n1" name="dow_n1">Sun&nbsp;</td> 
    </tr> 
0

var $ext = $row.find('input[name*="extension"]');常に何かを返します。結果がない場合、長さが0の空のjQueryオブジェクトが返されます。コードを修正する1つの方法は、先に進む前に$ext.length > 0を確認することです。

関連する問題