想要在JQuery中获取表行的特定子项

时间:2015-09-01 13:57:35

标签: javascript jquery html html5

我有这张桌子

<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>

我想在触发onchange事件时在Jquery中获取两个输入类型值(复选框和数字),值得一提的是我使用Jquery DataTables进行渲染,并且两个输入都具有id&#34;复选框&#34; + i和&#34;数量&#34; + i其中i是呈现的行数,输入是在控制器中加载的技巧字符串类型

    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());
    });
});

1 个答案:

答案 0 :(得分:1)

希望这会对你有所帮助,控制台中的完整复选框以及状态改变时控制台中的当前状态。 演示有更多选项

strlen

演示:https://jsfiddle.net/cx7aep1m/1/