@{
ViewBag.Title = "addremoveRows";
}
<h2>Add/Remove Rows</h2>
<input type="button" id="btn_addrow" value="Add Row" /> <br />
<input type="button" id="btn_deleterow" value="Delete Row" />
<table id="tbl_customers">
<thead>
<tr>
<th>Customer ID</th><th>Name</th><th>Age</th><th>Account Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Ram</td><td>20</td><td>Student Account</td>
</tr>
<tr>
<td>2 </td><td>Balu</td><td>20</td><td>Student Account</td>
</tr>
<tr>
<td>3</td><td>Sidhu</td><td>25</td><td>Savings Account</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function () {
var tbl = $('#tbl_customers');
//on hover change the mouse pointer to hand
$(tbl).find('tbody tr').hover(function () {
$(this).css('cursor', 'pointer');
});
//on the click of the row add foreground color for deletion
$(tbl).find('tbody tr').click(function () {
$(tbl).find('tbody tr').removeClass('selectedRow'); //empty class, to identify row for deletion
$(tbl).find('tbody tr').css('color', '');
$(this).addClass('selectedRow');
$(this).css('color', 'blue');
});
});
//for delete row button click event
$('#btn_deleterow').unbind("click").click(function () {
//for removing the row from the grid
var tbl = $('#tbl_customers');
var noofRows = $(tbl).find('tbody tr').length;
//for empty table without rows
if (noofRows == 0) {
return;
}
var tBody = $(tbl).find('tbody');
var deleteRow = $(tBody).find('tr.selectedRow');
var delCnt = $(deleteRow).html();
if (delCnt == null) {
customDialog("Warning", "Please select row to delete");
}
else {
customDialog("Delete Confirmation", "Row Deleted Successfully");
$(deleteRow).remove();
}
});
//for add row button click event
$('#btn_addrow').unbind('click').click(function () {
//for adding dynamic rows
//for getting no of cells
var tbl = $('#tbl_customers');
var gridhdrRow = $(tbl).find('thead tr').first();
var gridhdrCell = $(gridhdrRow).find('th');
var noofCells = 0;
noofCells = $(gridhdrCell).index();
//end of getting no of cells
//for getting no of rows
var rowLength = 0;
rowLength = $(tbl).find('tbody tr').length;
rowLength++;
//end of getting no of rows
//for empty table without header
var tbl = $('#tbl_customers');
var gridhdrRow = $(tbl).find('thead tr').first();
var gridhdrCell = $(gridhdrRow).find('th');
if ($(gridhdrCell).length == 0) {
return;
}
//end of empty table without header
//create rows dynamically
//for empty table
var dynmicRow = $('<tr></tr>');
while (noofCells >= 0) {
$(dynmicRow).append('<td style="width:80px;height:15px;"></td>');
noofCells--;
}
var tbody = $(tbl).find('tbody');
$(tbody).append(dynmicRow);
//end of creating dynamic rows
//on hover change the mouse pointer to hand
$(tbl).find('tbody tr').hover(function () {
$(this).css('cursor', 'pointer');
});
//on the click of the row add css for deletion
$(tbl).find('tbody tr').click(function () {
$(tbl).find('tbody tr').removeClass('selectedRow');
$(tbl).find('tbody tr').css('color', '');
$(this).addClass('selectedRow');
$(this).css('color', 'blue');
});
});
//for jquery custom dialog box
function customDialog(headerValue, message) {
//remove the existing div
var divs = $('body').find('div[id="div_customDialog"]');
$.each(divs, function (index, divItem) {
$(divItem).remove();
});
//add new div
$('body').append('<div id="div_customDialog"></div>');
$('#div_customDialog').html(message);
$('#div_customDialog').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: headerValue,
minHeight: 75,
buttons: {
OK: function () {
$(this).dialog('close');
$(this).dialog('destroy');
}
}
});
$('#div_customDialog').dialog('open');
}
</script>
Controller:-
public ActionResult addremoveRows()
{
try
{
return View();
}
catch (Exception)
{ }
return null;
}
No comments:
Post a Comment