Text/Javascript rowcount is not working returns only 0-CodePudding

im using laravel and javascript and the rowcount does not read the following variables after first vairables. what im trying to do is to submit multiple IPs and when i check it using dd only gets the first variable and in the "alert(rowCount); it returns zero". plss help with this thank you..

this is the blade.php

</div>
        <div >
           <div >
                <h5 > <span ></span> <b>Server Description</b></h5>
                <hr ></hr>
                <div >
                    <div >
                        <a href="#"  id="addrow"><span ></span> ADD Source / Destination</a>
                    </div>  
                    <table  id="tblItems" >
                        <thead >
                            <td >
                            <td >Source Servername</td>
                            <td >IP address</td>
                            <td >Destination Servername</td>
                            <td >IP address</td>
                        </thead>
                        <tbody>
                            <!-- @foreach(old('source_name', ['value']) as $fw_ip) -->
                                <tr>
                                    <td >
                                    <label  id="row_no"><b>#1</b></label></td>
                                    <td >
                                        <!-- <label >Item</label> -->
                                        <input type="text" name="source_namex[]" >
                                    </td>
                                    <td >
                                        <!-- <label >Item</label> -->
                                        <input type="text"  name="sourceip[]" maxlength="15" value="{{ old('sourceip.'.$loop->index) }}" placeholder="xxx.xxx.xxx.xxx" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                                    </td>
                                    <td >
                                        <!-- <label >Item</label> -->
                                        <input type="text" name="destname[]"  value="{{ old('destname.'.$loop->index) }}">
                                    </td>
                                    <td >
                                        <!-- <label >Item</label> -->
                                        <input type="text"  name="destip[]" maxlength="15" value="{{ old('destip.'.$loop->index) }}" placeholder="xxx.xxx.xxx.xxx" pattern="^((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$">
                                    </td>
                                    <td >
                                        <center><span ></span></center>
                                    </td>
                                </tr>
                            <!-- @endforeach -->
                            </tbody>
                    </table>
                </div>
                <div >
                    <div >
                        <div >
                          <button type="submit" >Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

javascipt

<script type="text/javascript">
  
    var rowCount = $("#tblItems tbody>td").length;
    var rowCount = ;
    alert(rowCount);
    $('.type').change(function()
    {
       
    });
    $('#addrow').click(function()
    {
        rowCount  = 1;
        
        $("#tblItems tbody>tr:first").clone(true).insertAfter("#tblItems tbody>tr:last");
        $("#tblItems tbody>tr:last").attr("id", "tr" rowCount);
        $("#tblItems tbody>tr:last #row_no").text("#" rowCount);
        $("#tblItems tbody>tr:last #row_no").css('font-weight','bold');
        $("#tblItems tbody>tr:last :input").val("");
       
     
    });
    $('.removerow').click(function()
    {
        var id = $(this).closest('tr').attr('id')
        $('table#tblItems tr#' id).remove();
        rowCount -=1;
    });


      
</script>

CodePudding user response：

The problem is with your CSS selector, specifically the > in #tblItems tbody>td".

From MDN:

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

(Emphasis mine)

This means you are instructing jQuery to return all <td> elements that are direct children of the <tbody> in the the table with id #tblItems. But there are no such direct children because all of the <td> elements are children of a <tr>.

Your selector would either need to include the <tr> child, as in:

$("#tblItems tbody>tr>td")

Or just do without the child combinator (>) completely:

$("#tblItems tbody td")

Update

I mistakenly assumed that it was the count of <td> elements that was desired because the td was in the selector. I should have paid more attention to the fact that the variable name used is called "rowCount". As stated by @Win in the comments, to select <tr> elements, the selector would be:

$("#tblItems tbody > tr")

The use of the child combinator (>) in this case is acceptable because all of the <tr> elements we want will be direct children of the <tbody>. But it is important to understand that it will work equally well without the > as long as there are no nested <tr>s in the <tbody>.