Luis Rosales
Luis Rosales

Reputation: 133

Want to get a specific child of a table row in JQuery

I have this table

<tbody>
    <tr role="row" class="odd">
        <td>
            <input type="checkbox" id="checkBox0">
        </td>
        <td>
            <img alt="image" class="img-rounded"  src="" width="100" height="100">                   
        </td>
        <td>
            Poporopos Act II
        </td>
        <td>
            Ariba
        </td>
        <td>
            12,00
        </td>
        <td>
            <input id="quantity0" type="number" value="4" name="quantity" min="1" max="9999" size="4">
        </td>
        <td>
            48,00
        </td>
</tr>

I want to get both input type values (checkbox and number)in Jquery when the onchange event is triggered, it's worth saying that I use Jquery DataTables for render this and both inputs have the id "checkbox"+i and "quantity"+i where i is the number of the row rendered, and the inputs are a trick string types that are loaded in controller like this

    public DataTablesResult<ShoppingCartHelper> GetShoppingCart(DataTablesParam dataTableParam)
    {

        List<ShoppingCart> query = db.ShoppingCart.ToList();
        List<ShoppingCartHelper> newquery = new List<ShoppingCartHelper>();
        ShoppingCart item;
        decimal Total = 0;

        for (int i = 0; i < query.Count; i++)
        {
            item = query.ElementAt(i);
            ShoppingCartHelper helper = new ShoppingCartHelper();
            helper.IdShoppingCart = item.IdShoppingCart;
            helper.IdUser = item.IdUser;
            SupplierMaterials sM = db.SupplierMaterials.FirstOrDefault(x => x.IdSupplierMaterials == item.IdSupplierMaterial);
            string src;
            if (sM.SupplierMaterialImages.Count == 0)
            {

                src = "<img alt = \"image\" class=\"img-rounded\" src=\"" + Url.Content("~/Images/box.png") + "\" width=\"100\" height=\"100\">";
            }
            else
            {
                DataBlobImage datablob = new DataBlobImage();
                string path = sM.SupplierMaterialImages.FirstOrDefault().ImagePath;
                int index = path.LastIndexOf('t') + 1;
                string container = "environment"+path.Substring(index, path.Length - index);
                Task<string> image = Task.Run(() => datablob.GetImage(path, container));   
                src = "<img alt = \"image\" class=\"img-rounded\" src=\"" + image.Result + "\" width=\"100\" height=\"100\">";
            }
            helper.supplierMaterialName = item.SupplierMaterials.Name;
            helper.supplier = item.SupplierMaterials.Suppliers.SupplierName;
            helper.supplierMaterial = src;
            helper.quantity = "<input id=\"quantity" + i + "\" type = \"number\" value=\"" + item.Quantity + "\" name = \"quantity\" min = \"1\" max = \"9999\" size = \"4\"/>";
            helper.Price = item.Price;
            helper.IdCurrency = item.IdCurrency;
            helper.Checked = "<input type=\"checkbox\" id=\"checkBox"+i+"\" />";
            helper.subTotal = item.Price * item.Quantity;
            helper.price = item.Price;
            newquery.Add(helper);

        }

        return DataTablesResult.Create(newquery.AsQueryable(), dataTableParam,
        uv => new
        {
        });
    }

JavaScript

$(function () {
    var table = $('#table-id').DataTable();

    $('#table-id tbody').on('click', 'tr', function () {
        alert("Check");
        console.log(table.row(this).data());
    });
});

Upvotes: 0

Views: 79

Answers (1)

Farhan
Farhan

Reputation: 1483

hope this will help you, console complete checkbox in console and current status in console whenever state will change. Demo has more options

$(document).ready(function(){

    $("input[type='checkbox']").on("change", function(){
        console.log($(this).attr("id"));
        if($(this).is(":checked")){
            console.log("checked");
        }
        else{
            console.log("not checked");
            }
        });

    $("input[type='number']").on("change", function(){
        console.log($(this).attr("id"));
        });

    });

Demo: https://jsfiddle.net/cx7aep1m/1/

Upvotes: 1

Related Questions