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

Question

我有这张 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>

当 onchange 事件被触发时，我想在 Jquery 中获取两个输入类型值(复选框和数字)，值得一提的是，我使用 Jquery DataTables 来渲染它，并且两个输入都有 id“checkbox”+i 和“quantity” “+i，其中 i 是呈现的行号，输入是像这样加载到 Controller 中的技巧字符串类型

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

Answer 1

希望这对您有帮助，只要状态发生变化，控制台中的控制台完成复选框和控制台中的当前状态。 演示有更多选项

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

    });

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