How to add html input textbox, label, checkbox to jqery table

Question

I want to add some HTML tags to the rows of my jQuery table. Just understand how to do it.
I have shown a short part of my code here.
If any experienced would help me. I would benefit. thanks in advance...


@*index.cshtml*@
<select class="" id="VenderDrop">
	<option value="0">---Select Vender Name----</option>
</select>
<select class="" id="CompanyDrop">
	<option value="0">---Select Company Name----</option>
</select>



<table id="blogTable" class="zui-table zui-table-rounded">
	<thead>
		<tr>
			<th>Product ID</th>
			<th>Product Name</th>
			<th>Purchase Rate</th>
			<th>Qty</th>
			<th>value</th>
			<th>Checkbox</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>
<script>

	$("#CompanyDrop").change(function () {
		$.ajax({
			url: '/Purchase/GetProductRecord',
			type: 'Get',
			datatype: JSON,
			data: {
				companyid: $("#CompanyDrop").val()
			},
			success: function (data) {
				$('#blogTable tbody').empty();
				$.each(data, function (i, item) {
					var rows = "<tr>"
						+ "<td>" + item.productID + "</td>"
						+ "<td>" + item.product_name + "</td>"
						+ "<td>" + item.purchaseRate + "</td>" //1//here want to use label 
						+ "<td>" +   + "</td>" //2//here want to use textbox for enter Qty
						+ "<td>" + + "</td>" //3//here want to use label for  Qty* item.purchaseRate
						+ "<td>" + + "</td>" //4//here want to use checkbox for Checkbox Checked
						+ "</tr>";

					$('#blogTable tbody').append(rows);
					//1// <td><label>item.purchaseRate</label> </td>
					//2// <td><input type="number" value="" min="1" onkeypress="return isNumberKey(event)" class="txt_qty" /></td>
					//3// <td><label ></label></td>
					//4// <td><input type="checkbox" name="Selectone" class="chk_isChecked" id="item.productID" /></td>
//here i shown some code of my project
				});
			}
		});

	});
	function isNumberKey(evt) {
		var charCode = (evt.which) ? evt.which : evt.keyCode
		if (charCode > 31 && (charCode < 48 || charCode > 57))
			return false;
		return true;
	}

</script>

Answer 1

Hi @jewel,

Please check the sample code.

Index.cshtml

@{
    ViewData["Title"] = "How to add html input textbox, label, checkbox to jqery table";
}
<style>
    #blogTable {
        border-collapse: collapse; 
        border: 1px solid black;
    }
    #blogTable th, #blogTable td {
        border: 1px solid black;
        padding: 8px;
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Including jQuery library -->
<script>
    $(document).ready(function () {

        // init data
        loadData();
        

        $("#CompanyDrop").change(function () {
            loadData();
        });

        $("#productForm").submit(function (e) {
            e.preventDefault();

            var products = [];

            $("#blogTable tbody tr").each(function () {
                var product = {
                    productID: $(this).find("td:eq(0)").text(),
                    productName: $(this).find("td:eq(1)").text(),
                    purchaseRate: $(this).find("td:eq(2) label").text(),
                    qty: ($(this).find("td:eq(3) input").val() == "") ? 0 : $(this).find("td:eq(3) input").val(),
                    totalValue: parseInt($(this).find("td:eq(2) label").text()) * (($(this).find("td:eq(3) input").val() == "") ? 0 : $(this).find("td:eq(3) input").val()),
                    isChecked: $(this).find("td:eq(5) input").prop("checked")
                };
                products.push(product);
            });

            $.ajax({
                url: '/Purchase/SubmitProducts',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(products),
                success: function (response) {
                    // Handle successful submission, e.g., show a message or redirect
                    alert(response.message);
                },
                error: function (error) {
                    // Handle errors
                    alert("Error occurred while submitting data!");
                }
            });
        });

    })

    function loadData() {

        $.ajax({
            url: '/Purchase/GetProductRecord',
            type: 'Get',
            datatype: 'json', // fixed datatype to 'json' (lowercased string)
            data: {
                companyid: $("#CompanyDrop").val()
            },
            success: function (data) {
                $('#blogTable tbody').empty();
                $.each(data, function (i, item) {
                    var rows = "<tr>"
                        + "<td>" + item.productID + "</td>"
                        + "<td>" + item.productName + "</td>"
                        + "<td><label>" + item.purchaseRate + "</label></td>"
                        + "<td><input type='number' value='' min='1' onkeypress='return isNumberKey(event)' class='txt_qty' data-rate='" + item.purchaseRate + "'/></td>"
                        + "<td><label class='total-value'></label></td>"
                        + "<td><input type='checkbox' name='Selectone' class='chk_isChecked' id='" + item.productID + "'/></td>"
                        + "</tr>";

                    $('#blogTable tbody').append(rows);
                });
                // Dynamic calculation of total value based on qty entered
                $(".txt_qty").on("input", function () {
                    var rate = $(this).data("rate");
                    var qty = $(this).val();
                    var total = rate * qty;
                    $(this).closest("tr").find(".total-value").text(total);
                });
            }
        })
    }

    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }
</script>

<form id="productForm" method="post" action="/Purchase/SubmitProducts">
    <select class="" id="VenderDrop">
        <option value="0">---Select Vender Name----</option>
    </select>
    <select class="" id="CompanyDrop">
        <option value="0">---Select Company Name----</option>
        <option value="1">---Select Company 1   ----</option>
        <option value="2">---Select Company 2   ----</option>
        <option value="3">---Select Company 3   ----</option>
        <option value="4">---Select Company 4   ----</option>
        <option value="5">---Select Company 5   ----</option>
        <option value="6">---Select Company 6   ----</option>
        <option value="7">---Select Company 7   ----</option>
        <option value="8">---Select Company 8   ----</option>
        <option value="9">---Select Company 9   ----</option>
    </select>

    <br /><br />

    <table id="blogTable" class="zui-table zui-table-rounded">
        <thead>
            <tr>
                <th>Product ID</th>
                <th>Product Name</th>
                <th>Purchase Rate</th>
                <th>Qty</th>
                <th>value</th>
                <th>Checkbox</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <br />
    <!-- Submit button -->
    <input type="submit" value="Submit" />
</form>

PurchaseController.cs

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;

namespace signalr_iwa.Controllers
{
    public class PurchaseController : Controller
    {

        public IActionResult Index()
        {
            return View();
        }


        [HttpGet]
        public IActionResult GetProductRecord(int companyid)
        {
            // Dummy logic to get products by company id.
            // Replace with your actual data retrieval logic from the database.
            
            List<Product> mockData =  new List<Product>();

            for (int i = 1; i <= 10; i++)
            {
                Product p = new Product();
                p.ProductID = i;
                p.ProductName = "ProductName-" + i;
                p.PurchaseRate = new decimal(i);
                p.CompanyId = i;
                mockData.Add(p);
            }

            var products = new List<Product>(); ;

            if (companyid == 0)
            {
                products = mockData; // _context.Products.Where(p => p.CompanyId == companyid).ToList();
            }
            else {
                products = mockData.Where(a => a.CompanyId == companyid).ToList(); 
            }
           

            return Json(products);
        }

        [HttpPost]
        public IActionResult SubmitProducts([FromBody]List<ProductDTO> products)
        {
            try
            {

                int count = products.Count;

                // After processing the products, return a success response.
                return Ok(new { message = $"{count} products received." });
            }
            catch
            {
                // Handle errors appropriately. 
                // This is a basic error handling, make sure to provide specific error messages and logging as necessary.
                return BadRequest(new { message = "Failed to process products." });
            }
        }

    }
    public class Product
    {
        public int ProductID { get; set; }
        public string? ProductName { get; set; }
        public decimal PurchaseRate { get; set; }
        public int CompanyId { get; set; }
    }
    public class ProductDTO
    {
        public int ProductID { get; set; }
        public string? ProductName { get; set; }
        public decimal? PurchaseRate { get; set; }
        public int? Qty { get; set; }
        public decimal? TotalValue { get; set; }
        public bool? IsChecked { get; set; }
    }

}

You can move Product and ProductDTO to model folder.

Test Result

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Jason