Asp.Net Ado.Net, C#.Net,Javascript Jquery Entity Framework,Ajax,MVC..! Happy coding..! :)

Every Question..What does it mean? Why is this? How it works?
Microsoft .Net (pronounced dot (.) net) may be a package element that runs on the Windows software package. .Net provides tools and libraries that change developers to form Windows package a lot of quicker and easier. Microsoft describes it as:".Net is that the Microsoft internet Service strategy to attach data, people, system and devices through software".I'm Choulla Naresh..!

Friday, April 7, 2017

Add,Edit And Delete Rows From Table Dynamically Using JavaScript Html Page

<html>

<head>

</head>

<body>

<tr>

<th>Country</th>

</tr>

<td id="name_row1">Ankit</td>

<td id="country_row1">India</td>

<td>

</td>

</tr>

<td id="name_row2">Shawn</td>

<td id="country_row2">Canada</td>

<td>

</td>

</tr>

<td id="name_row3">Rahul</td>

<td id="country_row3">India</td>

<td>

</td>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

function edit_row(no) {

document.getElementById("edit_button" + no).style.display = "none";

document.getElementById("save_button" + no).style.display = "block";

var name = document.getElementById("name_row" + no);

var country = document.getElementById("country_row" + no);

var age = document.getElementById("age_row" + no);

var name_data = name.innerHTML;

var country_data = country.innerHTML;

var age_data = age.innerHTML;

name.innerHTML = "<input type='text' id='name_text" + no + "' value='" + name_data + "'>";

country.innerHTML = "<input type='text' id='country_text" + no + "' value='" + country_data + "'>";

age.innerHTML = "<input type='text' id='age_text" + no + "' value='" + age_data + "'>";

}

function save_row(no) {

var name_val = document.getElementById("name_text" + no).value;

var country_val = document.getElementById("country_text" + no).value;

var age_val = document.getElementById("age_text" + no).value;

document.getElementById("name_row" + no).innerHTML = name_val;

document.getElementById("country_row" + no).innerHTML = country_val;

document.getElementById("age_row" + no).innerHTML = age_val;

document.getElementById("edit_button" + no).style.display = "block";

document.getElementById("save_button" + no).style.display = "none";

}

function delete_row(no) {

document.getElementById("row" + no + "").outerHTML = "";

}

function add_row() {

var new_name = document.getElementById("new_name").value;

var new_country = document.getElementById("new_country").value;

var new_age = document.getElementById("new_age").value;

var table = document.getElementById("data_table");

var table_len = (table.rows.length) - 1;

var row = table.insertRow(table_len).outerHTML = "<tr id='row" + table_len + "'><td id='name_row" + table_len + "'>" + new_name + "</td><td id='country_row" + table_len + "'>" + new_country + "</td><td id='age_row" + table_len + "'>" + new_age + "</td><td><input type='button' id='edit_button" + table_len + "' value='Edit' class='edit' onclick='edit_row(" + table_len + ")'> <input type='button' id='save_button" + table_len + "' value='Save' class='save' onclick='save_row(" + table_len + ")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'></td></tr>";

document.getElementById("new_name").value = "";

document.getElementById("new_country").value = "";

document.getElementById("new_age").value = "";

}

</script>

----------------------------------------------------------------------

Example 2:

<head>

<title>Create Elements Dynamically using jQuery</title>

</script>

</head>

<body>

</div>

</body>

$(document).ready(function () {

var iCnt = 0;

var container = $(document.createElement('div')).css({

padding: '8px', margin: '20px', width: '180px', border: '1px solid',

borderTopColor: '#000', borderBottomColor: '#000',

borderLeftColor: '#000', borderRightColor: '#000'

});

$('#btAdd').click(function () {

if (iCount <= 19) {

iCount = iCount + 1;

$(container).append('<input type=text class="input" id=tb' + iCount + ' ' +

'value="Text Element ' + iCount + '" />');

if (iCount == 1) {

var divSubmit = $(document.createElement('div'));

$(divSubmit).append('<input type=button class="bt"' +

'onclick="GetTextValue()"' +

'id=btSubmit value=Submit />');

}

$('#main').after(container, divSubmit);

}

else {

$(container).append('<label>Reached the limit</label>');

$('#btAdd').attr('class', 'bt-disable');

$('#btAdd').attr('disabled', 'disabled');

}

});

$('#btRemove').click(function () {

if (iCount != 0) { $('#tb' + iCount).remove(); iCount = iCount - 1; }

if (iCount == 0) {

$(container)

.empty()

.remove();

$('#btSubmit').remove();

$('#btAdd')

.removeAttr('disabled')

.attr('class', 'bt');

}

});

$('#btRemoveAll').click(function () {

$(container)

.empty()

.remove();

$('#btSubmit').remove();

iCount = 0;

$('#btAdd')

.removeAttr('disabled')

.attr('class', 'bt');

});

var divValue, values = '';

function GetTextValue() {

$(divValue)

.empty()

.remove();

values = '';

$('.input').each(function () {

divValue = $(document.createElement('div')).css({

padding: '5px', width: '200px'

});

values += this.value + '<br />'

});

$(divValue).append('<p><b>Your selected values</b></p>' + values);

$('body').append(divValue);

}

</script>

</html>

===============================================================

Example 3:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(document).ready(function () {

$('.del').live('click', function () {

$(this).parent().parent().remove();

});

$('.add').live('click', function () {

$(this).val('Delete');

$(this).attr('class', 'del');

var appendTxt = "<tr><td><input type='text' name='input_box_one[]' /></td> <td><input type='text' name='input_box_two[]' /></td> <td><input type='button' class='add' value='Add More' /></td></tr>";

$("tr:last").after(appendTxt);

});

</script>

</head>

<body>

<tr>

<td>Input-Box-One</td>

<td>Input-Box-Two</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

=====================================================
Example 4:

<!DOCTYPE html>

<head>

<title>Dynamically Add/Remove Rows In HTML Table Using JavaScript</title>

function addRow(tableId) {

var listValues =

[{ value: "1", text: "Charity 1" }, { value: "2", text: "Charity 2" }, { value: "3", text: "Charity 3" }];

document.getElementById('hdnListCount').value = listValues.length;

var table = document.getElementById(tableId);

var listCount = document.getElementById('hdnListCount').value;

var rowCount = table.rows.length;

if (rowCount <= listCount) {

var row = table.insertRow(rowCount);

// Column 1

var cell1 = row.insertCell(0);

var ddlId = "ddlCharity" + ((rowCount - 1) + 1);

var element1 = document.createElement('select');

element1.setAttribute('id', ddlId);

for (var i = 0; i < listValues.length; i += 1) {

var option = document.createElement('option');

option.setAttribute('value', listValues[i].value);

option.appendChild(document.createTextNode(listValues[i].text));

element1.appendChild(option);

}

cell1.appendChild(element1);

// Column 2

var cell2 = row.insertCell(1);

var txtId = "txtDonationAmount" + ((rowCount - 1) + 1);

var element2 = document.createElement("input");

element2.setAttribute('id', txtId);

element2.type = "text";

element2.setAttribute('value', '0');

cell2.appendChild(element2);

// Column 3

var cell3 = row.insertCell(2);

var btnId = "btnDelete" + ((rowCount - 1) + 1);

var element3 = document.createElement("input");

element3.setAttribute('id', btnId);

element3.type = "button";

element3.setAttribute('value', 'Delete');

element3.onclick = function () { removeRow(btnId); };

cell3.appendChild(element3);

} else {

alert('You can add ' + listCount + ' charity-donation details only!');

}

function removeRow(btnDelete) {

var table = document.getElementById('dataTable');

var rowCount = table.rows.length;

for (var i = 0; i < rowCount; i++) {

var row = table.rows[i];

var rowObj = row.cells[2].childNodes[0];

if (rowObj.id == btnDelete) {

table.deleteRow(i);

rowCount--;

}

function saveDetail() {

var table = document.getElementById('dataTable');

var rowCount = table.rows.length;

var rowState = "";

if (rowCount > 1) {

for (var i = 1; i <= rowCount; i++) {

var row = table.rows[i];

var charitySelect = row.cells[0].childNodes[0];

var donationAmount = row.cells[1].childNodes[0];

if (donationAmount.value == "0") {

alert("Donation amount should be greater than 0");

donationAmount.focus();

break;

}

var isValidRegex = /^\d+$/;

if (!isValidRegex.test(donationAmount.value)) {

alert("Donation amount should be a digit value");

donationAmount.focus();

break;

}

rowState = rowState + charitySelect.value + "," + donationAmount.value + ":";

document.getElementById('hdnTableState').value = rowState;

}

} else {

alert('No record present!');

}

</script>

</head>

<body>

<tr>

<th>

Charity

</th>

<th>

Donation Amount

</th>

<th>

Action

</th>

</tr>

</table>

</body>

</html>