jquery输入隐藏值没有得到

时间：2015-09-24 15:37:40

标签： javascript jquery

我得到的是alert（grp）的未定义值;不知道出了什么问题。

下面实际上有两种形式，每种形式都有输入隐藏标签。因此，只要我单击“删除”按钮，我就会尝试检索该表单的输入隐藏值。

以下是代码： 

<script type="text/javascript" language="javascript" class="init">
  $(document).ready(function () {
    var uids = [];

    $('table[id^="example"]').each(function () {
      var tableId = '#' + this.id;

      $(tableId + ' tfoot th').each(function () {
        var title = $(tableId + ' thead th').eq($(this).index()).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
      });

      // DataTable
      var table = $(tableId).DataTable({
        "paging": true
      });

      // Apply the search
      table.columns().every(function () {
        var that = this;

        $('input', this.footer()).on('keyup change', function () {
          that
              .search(this.value)
              .draw();
        });
      });

      $(this).on('click', '.remove', function (e) {
        var grp = $('form input:hidden[name=group]').val();
        alert(grp);
      });
    });

  });
</script>

HTML 

<body>
<form>
  <input type= hidden name= group value="group1">
  <table id="example1" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
      <th></th>
    </tr>
    </thead>

    <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
      <th></th>
    </tr>
    </tfoot>

    <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>$320,800</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>$433,060</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>$103,600</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Quinn Flynn</td>
      <td>Support Lead</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>$342,000</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Dai Rios</td>
      <td>Personnel Lead</td>
      <td>Edinburgh</td>
      <td>35</td>
      <td>$217,500</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Gavin Joyce</td>
      <td>Developer</td>
      <td>Edinburgh</td>
      <td>42</td>
      <td>$92,575</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Martena Mccray</td>
      <td>Post-Sales support</td>
      <td>Edinburgh</td>
      <td>46</td>
      <td>$324,050</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Jennifer Acosta</td>
      <td>Junior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>43</td>
      <td>$75,650</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Shad Decker</td>
      <td>Regional Director</td>
      <td>Edinburgh</td>
      <td>51</td>
      <td>$183,000</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    </tbody>
  </table>
</form>

<form>
  <input type= hidden name= group value="group2">
  <table id="example2" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
      <th></th>
    </tr>
    </thead>

    <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
      <th></th>
    </tr>
    </tfoot>

    <tbody>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>$90,560</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Haley Kennedy</td>
      <td>Senior Marketing Designer</td>
      <td>London</td>
      <td>43</td>
      <td>$313,500</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Tatyana Fitzpatrick</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>19</td>
      <td>$385,750</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Michael Silva</td>
      <td>Marketing Designer</td>
      <td>London</td>
      <td>66</td>
      <td>$198,500</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Bradley Greer</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>41</td>
      <td>$132,000</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Angelica Ramos</td>
      <td>Chief Executive Officer (CEO)</td>
      <td>London</td>
      <td>47</td>
      <td>$1,200,000</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Suki Burks</td>
      <td>Developer</td>
      <td>London</td>
      <td>53</td>
      <td>$114,500</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Prescott Bartlett</td>
      <td>Technical Author</td>
      <td>London</td>
      <td>27</td>
      <td>$145,000</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Timothy Mooney</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>37</td>
      <td>$136,200</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Bruno Nash</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>38</td>
      <td>$163,500</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Hermione Butler</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>47</td>
      <td>$356,250</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    <tr>
      <td>Lael Greer</td>
      <td>Systems Administrator</td>
      <td>London</td>
      <td>21</td>
      <td>$103,500</td>
      <td>
        <button type="button" class="btn btn-primary btn-details remove">Remove</button>
      </td>
    </tr>
    </tbody>
  </table>
</form>
</body>

4 个答案:

答案 0 :(得分：1)

你应该使用each来获取元素

中的两个值 
$('form input:hidden[name=group]').each(function(){
   $( this ).val();
})

答案 1 :(得分：1)

使用此行
var grp=(this).parents('form').find('input:hidden[name=group]').val();
而不是 var grp = $('form input:hidden[name=group]').val(); 

$(document).ready(function() {

  var uids = [];

  $('table[id^="example"]').each(function() {
    var tableId = '#' + this.id;

    $(tableId + ' tfoot th').each(function() {
      var title = $(tableId + ' thead th').eq($(this).index()).text();
      $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });

    // DataTable
    var table = $(tableId).DataTable({
      "paging": true
    });

    


    $(this).on('click', '.remove', function(e) {

      var grp = $(this).parents('form').find('input:hidden[name=group]').val();

      alert(grp);
    });

  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>

<body>
  <form>
    <input type=hidden name=group value="group1">
    <table id="example1" class="display" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Salary</th>
          <th></th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Salary</th>
          <th></th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>$320,800</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>$433,060</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Sonya Frost</td>
          <td>Software Engineer</td>
          <td>Edinburgh</td>
          <td>23</td>
          <td>$103,600</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Quinn Flynn</td>
          <td>Support Lead</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>$342,000</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Dai Rios</td>
          <td>Personnel Lead</td>
          <td>Edinburgh</td>
          <td>35</td>
          <td>$217,500</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Gavin Joyce</td>
          <td>Developer</td>
          <td>Edinburgh</td>
          <td>42</td>
          <td>$92,575</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Martena Mccray</td>
          <td>Post-Sales support</td>
          <td>Edinburgh</td>
          <td>46</td>
          <td>$324,050</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Jennifer Acosta</td>
          <td>Junior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>43</td>
          <td>$75,650</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Shad Decker</td>
          <td>Regional Director</td>
          <td>Edinburgh</td>
          <td>51</td>
          <td>$183,000</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
      </tbody>
    </table>
  </form>
  <form>
    <input type=hidden name=group value="group2">
    <table id="example2" class="display" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Salary</th>
          <th></th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Salary</th>
          <th></th>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Jena Gaines</td>
          <td>Office Manager</td>
          <td>London</td>
          <td>30</td>
          <td>$90,560</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Haley Kennedy</td>
          <td>Senior Marketing Designer</td>
          <td>London</td>
          <td>43</td>
          <td>$313,500</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Tatyana Fitzpatrick</td>
          <td>Regional Director</td>
          <td>London</td>
          <td>19</td>
          <td>$385,750</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Michael Silva</td>
          <td>Marketing Designer</td>
          <td>London</td>
          <td>66</td>
          <td>$198,500</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Bradley Greer</td>
          <td>Software Engineer</td>
          <td>London</td>
          <td>41</td>
          <td>$132,000</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Angelica Ramos</td>
          <td>Chief Executive Officer (CEO)</td>
          <td>London</td>
          <td>47</td>
          <td>$1,200,000</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Suki Burks</td>
          <td>Developer</td>
          <td>London</td>
          <td>53</td>
          <td>$114,500</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Prescott Bartlett</td>
          <td>Technical Author</td>
          <td>London</td>
          <td>27</td>
          <td>$145,000</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Timothy Mooney</td>
          <td>Office Manager</td>
          <td>London</td>
          <td>37</td>
          <td>$136,200</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Bruno Nash</td>
          <td>Software Engineer</td>
          <td>London</td>
          <td>38</td>
          <td>$163,500</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Hermione Butler</td>
          <td>Regional Director</td>
          <td>London</td>
          <td>47</td>
          <td>$356,250</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
        <tr>
          <td>Lael Greer</td>
          <td>Systems Administrator</td>
          <td>London</td>
          <td>21</td>
          <td>$103,500</td>
          <td>
            <button type="button" class="btn btn-primary btn-details remove">Remove</button>
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</body>

注意：删除了table.columns JS代码，因为它是单独的插件，我没有得到JS

答案 2 :(得分：1)

演示：http://jsfiddle.net/swm53ran/335/ 

$(document).ready(function() {
    $(document).on('click', '.remove', function() {
        alert($(this).closest('form').find('input[type=hidden]').val());
    });
});

答案 3 :(得分：0)

请删除该属性前的空格并引用type和name作业：

<input type= hidden name= group value="group1">

必须是：

<input type="hidden" name="group" value="group1">

演示：http://jsfiddle.net/Lq9xvsgp/

相关问题
最新问题