How to add Edit and Delete button for jq tablefor every row

function gridBind() {

debugger;

var userid = "109";

jQuery("#gridTable").trigger("reloadGrid");

var parameters = "{'ID':'" + userid + "'}";

jQuery("#gridTable").jqGrid({

datatype: function () {

bindGridData();

colNames: ['NAME', 'AGE', 'ACTION'],

colModel: [

{ name: 'NAME', index: NAME', width: 30, align: 'left', sortable: false, hidden: false },

{ name: 'ÁGE', index: 'AGE', width: 20, align: 'left', hidden: false, editable: true, edittype: "text" },

{ name: 'ACTION', search: false, index: 'parameters', width: 35, sortable: false, formatter: deleteLink }

rowNum: 100,

rownumbers: true,

rowList: [10, 20, 30, 40],

sortname: 'DISPLAY_NAME',

pager: jQuery('#pageGrading'),

sortOrder: "ASC",

width: 700,

height: 200,

viewrecords: true,

multiselect: true,

cellEdit: true,

viewsortcols: [true, 'horizontal', true],

emptyrecords: "No record(s) to display",

loadtext: "Loading..."

});

jQuery("#gridTable").jqGrid('navGrid', "#gridTable", { edit: false, add: false, del: false, search: true, refresh: true });

}

this is my jquery function , i want edit and delete link in colmodel. how can i add.? plz help me

>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">script>
head>
<body>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>Sl.Noth>
<th>Byke Nameth>
<tr>
thead>
<tbody id="tblBykeLists"><tbody>
table>
div>
<script>
$(document).ready(function(){
var bykeList=["Hero","Honda","Suzuki"];
for(i=0;i<bykeList.length;i++){
var html=""+Number(1+i)+"td><td>"+bykeList[i]+"td><td><input type='button' Value='Edit'/><input type='button' Value='Save'/><input type='button' Value='Delete'/>td>tr>";
$("#tblBykeLists").append(html);
}
});
script>
body>
html>

1 Reply

Know the answer? Post it — somebody with the same question will find it here.