为什么我的jquery代码比我期待的更多行？

时间：2016-11-15 23:46:12

标签： javascript jquery html

我有以下html表：

<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表示例中，我实际上只有一行数据...但是捕获表中的所有三行并返回输出：

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

问题

我认为这一行：

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

将返回我的表中具有类＆＃34; tcdata＆＃34;。
的所有行 然后我想到了这一行：

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

将过滤每一行，并且只给出具有名称与模式匹配的输入控件的行，在这种情况下为＆＃34; extension＆＃34;。

但它明显地给了我比我想要的更多，所以代码失败了。 我似乎无法找到我的错误。

任何建议都将不胜感激。

2 个答案:

答案 0 :(得分：0)

您需要class作为tcdata所需的<tr>代码，并且必须将此$('.tcdata tr').each(function (i, row) {更改为$('tr.tcdata').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>

答案 1 :(得分：0)

var $ext = $row.find('input[name*="extension"]');将永远返回一些东西。如果没有结果，你将得到一个长度为0的空jQuery对象。修复代码的一种方法是在继续之前确保$ext.length > 0。

相关问题
最新问题