How to add, delete or validate that the row are already added into target html table dynamically. To accomplish this objective I wrote a jqury plugin. The name of the JQuery plugin is - table-jquery.js.
The Html sample file looks like -
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="table-jquery.js"></script>
<style>
.label{
font-family:Times;
font-weight:bold;
}
</style>
</head>
<body>
<div id="page_body" style="font-family: none;">
<fieldset id="mapping" style="width: 100%;">
<div id="mapping_div" class="smart-forms">
<label for="source" value="Source" class="label">Source:</label>
<select name="source" id="source">
<option value="Source One">Source One</option>
<option value="Source Two">Source Two</option>
<option value="Source Three">Source Three</option>
<option value="Source Four">Source Four</option>
<option value="Source Five">Source Five</option>
<select>
<label for="destination" value="Destination" class="label">Destination: </label>
<select name="destination" id="destination">
<option value="Destination One">Destination One</option>
<option value="Destination Two">Destination Two</option>
<option value="Destination Three">Destination Three</option>
<option value="Destination Four">Destination Four</option>
<option value="Destination Five">Destination Five</option>
</select>
<label for="calculative" value="Calculative" class="label" >Calculative: </label>
<input type="checkbox" name="calculative" id="calculative" checked="checked"> </checkbox>
<input type="button" name="addRow" value="Add Row" id="addRow" />
</div>
</fieldset>
<table id="mapped-table" style="border: 1px solid; width: 100%;">
<thead>
<tr>
<th>SNo</th>
<th>Source</th>
<th>Destination</th>
<th>Calculative</th>
</tr>
</thead>
<tbody style="text-align: center;">
</tbody>
</table>
<button name="deleteRow" value="Delete Row" id="deleteRow">Delete Row</button>
</body>
<script type="text/javascript" src="myjquery.js"></script>
<script>
$(document).ready(function() {
$("#addRow").tableOpration();
} );
</script>
</html>
The Html sample file looks like -
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="table-jquery.js"></script>
<style>
.label{
font-family:Times;
font-weight:bold;
}
</style>
</head>
<body>
<div id="page_body" style="font-family: none;">
<fieldset id="mapping" style="width: 100%;">
<div id="mapping_div" class="smart-forms">
<label for="source" value="Source" class="label">Source:</label>
<select name="source" id="source">
<option value="Source One">Source One</option>
<option value="Source Two">Source Two</option>
<option value="Source Three">Source Three</option>
<option value="Source Four">Source Four</option>
<option value="Source Five">Source Five</option>
<select>
<label for="destination" value="Destination" class="label">Destination: </label>
<select name="destination" id="destination">
<option value="Destination One">Destination One</option>
<option value="Destination Two">Destination Two</option>
<option value="Destination Three">Destination Three</option>
<option value="Destination Four">Destination Four</option>
<option value="Destination Five">Destination Five</option>
</select>
<label for="calculative" value="Calculative" class="label" >Calculative: </label>
<input type="checkbox" name="calculative" id="calculative" checked="checked"> </checkbox>
<input type="button" name="addRow" value="Add Row" id="addRow" />
</div>
</fieldset>
<table id="mapped-table" style="border: 1px solid; width: 100%;">
<thead>
<tr>
<th>SNo</th>
<th>Source</th>
<th>Destination</th>
<th>Calculative</th>
</tr>
</thead>
<tbody style="text-align: center;">
</tbody>
</table>
<button name="deleteRow" value="Delete Row" id="deleteRow">Delete Row</button>
</body>
<script type="text/javascript" src="myjquery.js"></script>
<script>
$(document).ready(function() {
$("#addRow").tableOpration();
} );
</script>
</html>
This is a Jquery plugin (copy and paste it into a javascript file) -
/**
* Add, Delete and validate row using jquery
*
* @Author Pravind Kumar
*/
(function($) {
"use strict";
$.fn.tableOpration = function(element) {
/*
* The Below code is use to add a row into target table dynamically.
* When click event triggered on Add Row button.
*/
$('#addRow')
.click(
function() {
var source = $("#source").val();
var dimension = $("#destination").val();
var calculative = $("#calculative").is(":checked");
if (validate(source)) {
alert("Source attribute already available ... "
+ source);
} else {
var trow = "<tr><td><input type='checkbox' name='record'></td><td>"
+ source
+ "</td><td>"
+ dimension
+ "</td><td>"
+ calculative
+ "</td></tr>";
$("#mapped-table tbody").append(trow);
}
});
/*
* Below code is used to delete the row against the check box checked.
* While adding the row it also add a <td> </td> of checkbox .
*/
$("#deleteRow").click(
function() {
$("#mapped-table tbody").find('input[name="record"]').each(
function() {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
});
return this;
};
/*
* Below code is used to validate the row entity and send it back as true or
* false. if table has having the row with same source value then it returns
* true otherwise false.
*/
function validate(newValue) {
var matched = false;
$("#mapped-table > tbody > tr").each(function() {
$(this).find("td:eq(1)").each(function() {
var tdValue = new String($(this).text());
if (tdValue.search(newValue) > -1) {
matched = true;
return false;
}
})
});
return matched;
}
}(jQuery));
* Add, Delete and validate row using jquery
*
* @Author Pravind Kumar
*/
(function($) {
"use strict";
$.fn.tableOpration = function(element) {
/*
* The Below code is use to add a row into target table dynamically.
* When click event triggered on Add Row button.
*/
$('#addRow')
.click(
function() {
var source = $("#source").val();
var dimension = $("#destination").val();
var calculative = $("#calculative").is(":checked");
if (validate(source)) {
alert("Source attribute already available ... "
+ source);
} else {
var trow = "<tr><td><input type='checkbox' name='record'></td><td>"
+ source
+ "</td><td>"
+ dimension
+ "</td><td>"
+ calculative
+ "</td></tr>";
$("#mapped-table tbody").append(trow);
}
});
/*
* Below code is used to delete the row against the check box checked.
* While adding the row it also add a <td> </td> of checkbox .
*/
$("#deleteRow").click(
function() {
$("#mapped-table tbody").find('input[name="record"]').each(
function() {
if ($(this).is(":checked")) {
$(this).parents("tr").remove();
}
});
});
return this;
};
/*
* Below code is used to validate the row entity and send it back as true or
* false. if table has having the row with same source value then it returns
* true otherwise false.
*/
function validate(newValue) {
var matched = false;
$("#mapped-table > tbody > tr").each(function() {
$(this).find("td:eq(1)").each(function() {
var tdValue = new String($(this).text());
if (tdValue.search(newValue) > -1) {
matched = true;
return false;
}
})
});
return matched;
}
}(jQuery));
No comments:
Post a Comment