使用javascript以html格式获取输入数组字段的长度

时间:2017-05-10 10:08:56

标签: javascript jquery html laravel-5.4

我需要数组长度

html代码

<form action="#" method="POST" name="form1">
    <table class="table table-hover">
        <thead>
          <tr>
            <th>Name</th>
            <th>Date</th>
            <th>&nbsp;</th>
          </tr>
        </thead>
        <tbody>
            <tr id="profile_1_">
                <td><a href="http://localhost:8000/company/jobseeker/profile/1" target="_blank">Geethu</a></td>
                <td>2017-05-10 06:20:35</td>
                <td><button type="button" class="btn btn-danger btn-xs remove-profile" id="1">Remove</button></td>
                <td><input type="hidden" name="candidate[1]"></td>
                </tr>
                  <tr id="profile_2_">
                <td><a href="http://localhost:8000/company/jobseeker/profile/2" target="_blank">John</a></td>
                <td>2017-05-10 09:04:12</td>
                <td><button type="button" class="btn btn-danger btn-xs remove-profile" id="2">Remove</button></td>
                <td><input type="hidden" name="candidate[2]"></td>
            </tr>
        </tbody>            
    </table>
</form>

每次删除表格行时,我想得到候选数组的计数。

javascript代码

<script type="text/javascript">
    $(".remove-profile").click(function(){
        alert($('input[name="candidate[]"]').length);
        var id = $(this).attr('id');
        $('#profile_'+id).remove();
        getTotal();
    });

    function getTotal(){
      var count = $('input[name="candidate[]"]').length;
      var total = count * 10 ;
      $('input[name=total]').val(total);
    }
</script>

但我总是数到0。

1 个答案:

答案 0 :(得分:2)

首先在表tbody中添加一个类.profile-tbody

<tbody class="profile-tbody">
   @foreach($data as $key => $item)
     ...
   @endforeach
</tbody>

接下来添加以下jQuery代码

$(".profile-tbody").on( "click", ".remove-profile", function() {
  $('.profile-tbody tr').length;
});

由于您要动态删除元素,因此需要使用事件委派方法将事件处理程序附加到元素。简单的.click(function无效。

假设<tr>(行)的数量是数组中的项目数($item

另外请删除您添加的$('input[name="candidate[]"]').length,您只是检查输入字段(文本框)的长度,该字段甚至不存在&amp;因此它将始终返回0.