Pass (Send) HTML Table cell value to TextBox on Click using JavaScript and jQuery in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

How to pass Html table td value to razor textbox in asp.net mvc

         <table class="table table-responsive">
            <tr>
                <th>Name</th>
                <th>Code</th>
                <th>Qty</th>
                <th></th>
            </tr>
            <tr>
                <td><input type="text" id="txtName" class="form-control" /></td>
                    <td><input type="text" id="txtCode" class="form-control"/></td>
                    <td><input type="text" id="txtQty" class="form-control" /></td>
                <td>
                    <a class="dropdown-item"><input type="button" id="btnAdd" value="Add" onclick="Add()" class="btn btn-primary" /></a>
                </td>
            </tr>
        </table>
        <table id="tblItems" class="table table-responsive" style="display:none">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Code</th>
                    <th>Qty</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
                <tr> 
                    <td></td>
                    <td></td>
                    <td><input type="text" id="hidqty" value="0" class="form-control" /></td>"Testname1" })</td>*@
                </tr>
            </tfoot>
        </table> 
        <span id="val"></span>

 

Posted one month ago

Hi SUJAYS,

Refer below code.

Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {       
        return View();
    }
}

View

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function GetRow(ele) {
            var tds = $(ele).closest('tr').find('td');
            $("#txtName").val(tds.eq(0).html());
            $("#txtCode").val(tds.eq(1).html());
            $("#txtQty").val(tds.eq(2).html());
            $('#txtTotal').val($('#gTotal').html());
        }
        function Add() {
            AddRow($("#txtName").val(), $("#txtCode").val(), $("#txtQty").val());
            $("#txtName").val("");
            $("#txtCode").val("");
            $("#txtQty").val("");
            CalculateTotal();
        };

        function AddRow(name, qty, price) {
            var tBody = $("#tblItems > TBODY")[0];

            //Add Row.
            row = tBody.insertRow(-1);

            //Add Name cell.
            var cell = $(row.insertCell(-1));
            cell.html(name);
            cell.attr("onclick", "GetRow(this);");

            //Add Qty cell.
            cell = $(row.insertCell(-1));
            cell.html(qty);
            cell.attr("onclick", "GetRow(this);");

            //Add Price cell.
            cell = $(row.insertCell(-1));
            cell.html(price);
            cell.attr("onclick", "GetRow(this);");

            //Add Amount cell.
            cell = $(row.insertCell(-1));
            cell.html(parseInt(qty) * parseInt(price));

            //Add Button cell.
            cell = $(row.insertCell(-1));
            var btnRemove = $("<a>Remove</a>");
            btnRemove.attr("href", "#");
            btnRemove.attr("onclick", "Remove(this);");
            cell.append(btnRemove);
        };

        function Remove(button) {
            var row = $(button).closest("TR");
            var name = $("TD", row).eq(0).html();
            if (confirm("Do you want to delete item : " + name)) {
                var table = $("#tblItems")[0];
                table.deleteRow(row[0].rowIndex);
            }
            CalculateTotal();
        };

        function CalculateTotal() {
            var grandT = 0;
            $("#tblItems > TBODY > tr").each(function () {
                var t3 = $(this).find('td').eq(2).html();
                if (!isNaN(t3)) {
                    grandT += parseFloat(t3);
                }
            });
            $("#gTotal").html(grandT.toFixed());
        }
    </script>
</head>
<body>
    <table class="table table-responsive">
        <tr>
            <th>Name</th>
            <th>Code</th>
            <th>Qty</th>
            <th></th>
        </tr>
        <tr>
            <td><input type="text" id="txtName" class="form-control" /></td>
            <td><input type="text" id="txtCode" class="form-control" /></td>
            <td><input type="text" id="txtQty" class="form-control" /></td>
            <td>
                <a class="dropdown-item">
                    <input type="button" id="btnAdd" value="Add" onclick="Add()" class="btn btn-primary" />
                </a>
            </td>
        </tr>
    </table>
    <br />
    <input type="text" id="txtTotal" class="form-control" />
    <hr />
    <table id="tblItems" class="table table-responsive">
        <thead>
            <tr>
                <th>Name</th>
                <th>Code</th>
                <th>Qty</th>
                <th></th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <td></td>
                <td><span id="gTotal"></span></td>
            </tr>
        </tfoot>
    </table>
    <span id="val"></span>
</body>
</html>