I need to prevent users from adding Duplicate values to a HTML Table based on the Month mentioned in the table when click add row Button. I tried with Following method, but it will always skip the first row when checking duplicate values. Image shows the error I'm getting with Duplicates.
Method I tried.
<select id="month" class="form-control">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
</select>
<input type="number" id="amt5" />
<input type="button" class="btn" value="Add Row" onclick="ftm2add5()">
<table id="table5" class="table table-dark" border="1">
<thead>
<tr>
<th scope="col">Select</th>
<th scope="col">Month</th>
<th scope="col">T/O Value</th>
<th scope="col" style="display:none;">TORef</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
function ftm2add5() {
var cat = $("#month").val();
var amt = $("#amt5").val();
var cate = $("#month option:selected").html();
if (amt == "") {
$("#amt5").addClass("red-border");
} else {
var allCells = $("#table5 tr td:nth-child(2)");
var textMapping = {};
allCells.each(function() {
textMapping[$(this).text()] = true;
});
var count = 0;
for (var text in textMapping) count++;
if (count !== allCells.length) {
alert("found duplicate values");
} else {
var markup =
"<tr><td><input type='checkbox' name='record'></td><td>" +
cate +
"</td><td style='display:none;'>" +
cat +
"</td><td>" +
amt +
"</td></tr>";
$("#table5 tbody").append(markup);
}
}
}
Simply with a jquery selector:
$('#table5 tr:contains("' + cat +'")').length
function ftm2add5() {
var cat = $("#month").val();
var amt = $("#amt5").val();
var cate = $("#month option:selected").html();
if (amt == "") {
$("#amt5").addClass("red-border");
} else {
if ($('#table5 tr:contains("' + cat +'")').length > 0) {
alert("found duplicate values");
} else {
var markup =
"<tr><td><input type='checkbox' name='record'></td><td>" +
cate +
"</td><td style='display:none;'>" +
cat +
"</td><td>" +
amt +
"</td></tr>";
$("#table5 tbody").append(markup);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="month" class="form-control">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
</select>
<input type="number" id="amt5" />
<input type="button" class="btn" value="Add Row" onclick="ftm2add5()">
<table id="table5" class="table table-dark" border="1">
<thead>
<tr>
<th scope="col">Select</th>
<th scope="col">Month</th>
<th scope="col">T/O Value</th>
<th scope="col" style="display:none;">TORef</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
Related
I have implemented a checkall checkbox for the table but the table has pagination and DOM only gets the elements currently showing on the page. my implementation is not working on other paginations. how can we achieve this task?
.cshtml code
<table id="instruments" class="table table-bordered table-striped table-condensed table-hover smart-form has-tickbox" style="width: 100%;">
<thead>
<tr>
<th>
<input id="chkAffectCheckboxGroup" type="checkbox" />
</th>
<th data-class="expand" style="white-space: nowrap">#Model.idResource</th>
<th data-hide="phone" style="white-space: nowrap">#Model.SResource</th>
<th data-hide="phone" style="white-space: nowrap">#Model.LocationResource</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Instruments.Count; i++)
{
var values = Model.Instruments[i].Value.Split('~');
var status = values.Length > 0 ? values[0] : "";
var location = values.Length > 1 ? values[1] : "";
<tr>
<td>
<label class="checkbox">
#Html.CheckBoxFor(m => m.Instruments[i].Selected, new { #class = "chkInst" })
<i></i>
</label>
</td>
<td><label>#Model.Instruments[i].Text</label></td>
<td><label>#status</label></td>
<td><label>#location</label></td>
</tr>
}
</tbody>
</table>
Jquery Code
$(document).ready(
console.log("jquery called"),
manageCheckboxGroup('chkAffectCheckboxGroup', 'chkInst')
);
JavaScript Code
function manageCheckboxGroup(masterCheckboxId, slaveCheckboxesClass) {
$("#" + masterCheckboxId).click(function () {
$("." + slaveCheckboxesClass).prop('checked', this.checked);
});
$("." + slaveCheckboxesClass).click(function () {
if (!this.checked) {
$("#" + masterCheckboxId).prop('checked', false);
}
else if ($("." + slaveCheckboxesClass).length == $("." + slaveCheckboxesClass + ":checked").length) {
$("#" + masterCheckboxId).prop('checked', true);
}
});
}
Trying to implement table filter with And/Or logical operations. Now the table is filtering based on individual datepicker and select field. If I select AND the table should show both datepicker and select field results, if I select OR either of one should display. Is it possible to achieve it in jquery. Any help is appreciated.
$(document).on("change", "#datepicker .created_on , select", function() {
var dataVal = $("#datepicker .created_on").datepicker('getDate');
dataVal = $.datepicker.formatDate("d/m/y", dataVal);
var select_value = $("#nameselect select").val();
var logic = $("select.logic").val();
$("#myTable tr:not('#table-header')").hide();
if (select_value != "" && dataVal != "") {
$("#myTable tbody > tr").each(function() {
var data_type = $(this).data('type');
var datess = $(this).find("td:eq(3) label").text()
var condition = (logic == "1") ? ((data_type == select_value) && (datess == dataVal)) : ((data_type == select_value) || (datess == dataVal))
if (condition) {
$(this).show();
}
});
} else if (dataVal != "" && select_value == "") {
console.log("dwd")
$("label:contains('" + dataVal + "')").each(function() {
$(this).closest('tr').show();
});
} else if (dataVal == "" && select_value != "") {
$("[data-type=" + select_value + "]").each(function() {
$(this).show();
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div style="display:inline-flex;">
<label>logic</label>
<select style="width:60px;" required="" class="logic">
<option value="">select</option>
<option value="1">OR</option>
<option value="2">AND</option>
</select>
</div>
<div style="margin-left:10px;display:inline-flex;" id="nameselect">
<label for="value">Name</label>
<select style="width:120px;" id="mylist" class='form-control' required="">
<option value="">select</option>
<option value="Mary">Mary</option>
<option value="John">John</option>
<option value="Martin">Martin</option>
<option value="Rozi">Rozi</option>
</select>
</div>
<table class="" cellpadding="1" cellspacing="1" style="margin-top:10px;" id="myTable">
<thead>
<tr id="table-header">
<th><label> NAME</label></th>
<th><label> TYPE</label></th>
<th><label>Doc</label></th>
<th style="margin-left:10px"><label>Date</label></th>
</tr>
</thead>
<tbody id="">
<tr class="" data-type="Mary">
<td><label>Mary</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">1/1/21</label></td>
</tr>
<tr class="" data-type="John">
<td><label>John</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">31/1/21</label></td>
</tr>
<tr class="" data-type="Martin">
<td><label>Martin</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">21/2/21</label></td>
</tr>
<tr class="" data-type="Rozi">
<td><label>Rozi</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">5/10/20</label></td>
</tr>
</tbody>
</table>
You can use check if the logic select value is 1 or 2 depending on this use && or || operator and show required trs .
Demo code :
$(document).on("change", "#datepicker .created_on , select", function() {
var dataVal = $("#datepicker .created_on").datepicker('getDate');
dataVal = $.datepicker.formatDate("d/m/y", dataVal);
var select_value = $("#nameselect select").val(); //get select value
var logic = $("select.logic").val();
//check if both are not both empty
if (select_value != "" && dataVal != "") {
$("#myTable tr:not('#table-header')").hide();
$("#myTable tbody > tr").each(function() {
var data_type = $(this).data('type'); //get data attr value
var datess = $(this).find("td:eq(3) label").text() //get date value
//compare
var condition = (logic == "1") ? ((data_type == select_value) && (datess == dataVal)) : ((data_type == select_value) || (datess == dataVal))
if (condition) {
$(this).show(); //show
}
});
} else {
//show all..
$("#myTable tr").show();
//or some other logic you need .
}
});
(function($) {
$('.datepicker').each(function() {
$(this).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
onClose: function() {
//triggerFocus();
}
});
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div class="datepicker1" style="display:inline-flex;" id="datepicker">
<label for="datepicker">Date</label>
<input type="text" style="width:120px;" class="created_on required datepicker" placeholder="DD-MM-YYYY" required="">
</div>
<div style="display:inline-flex;">
<label>logic</label>
<select style="width:60px;" required="" class="logic">
<option value="">select</option>
<option value="1">AND</option>
<option value="2">OR</option>
</select>
</div>
<div style="margin-left:10px;display:inline-flex;" id="nameselect">
<label for="value">Name</label>
<select style="width:120px;" id="mylist" class='form-control' required="">
<option value="">select</option>
<option value="Mary">Mary</option>
<option value="John">John</option>
<option value="Martin">Martin</option>
<option value="Rozi">Rozi</option>
</select>
</div>
<table class="" cellpadding="1" cellspacing="1" style="margin-top:10px;" id="myTable">
<thead>
<tr id="table-header">
<th><label> NAME</label></th>
<th><label> TYPE</label></th>
<th><label>Doc</label></th>
<th style="margin-left:10px"><label>Date</label></th>
</tr>
</thead>
<tbody id="">
<tr class="" data-type="Mary">
<td><label>Mary</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">1/1/21</label></td>
</tr>
<tr class="" data-type="John">
<td><label>John</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">31/1/21</label></td>
</tr>
<tr class="" data-type="Martin">
<td><label>Martin</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">21/2/21</label></td>
</tr>
<tr class="" data-type="Rozi">
<td><label>Rozi</label></td>
<td><label>text</label></td>
<td><label>word</label></td>
<td><label style="margin-left:10px">5/10/20</label></td>
</tr>
</tbody>
</table>
I’ve searched and consulted a lot of code but nothing is helping me to fix my problem.
What I have is just "add rows", but I want also the sum after adding the rows.
Here is a part of my code that adds a row to a table:
Code for adding rows
$(document).ready(function () {
$(".add-row").click(function () {
var name = $("#name").val();
var email = $("#email").val();
var markup = "<tr><td style='text-align:center'><input type='checkbox' name='record'></td><td>" + email + "</td><td class='sum_me' style='text-align: right;'>" + name + "</td></tr>";
$("table tbody").append(markup);
});
});
Html
<table id="countit">
<thead>
<tr>
<th width=50px>Delete</th>
<th width=150px style="text-align: center;">Inpayment of:</th>
<th width=50px style="text-align: center;">AMOUNT :</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
<input type="button" class="btn-success" value="Save Transaction" style="width: 150px; float: right;">
<br>
<br>
Create a function that sums the values and shows the result. call it after adding the row to the table.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function updateSum(){
var sum = 0;
$('.sum_me').each(function(item, index){
sum = sum + $(item).text();
});
$('#total').text(sum);
}
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val(); // input text
var email = $("#email").val(); // input text
var markup = "<tr><td style='text-align:center'><input type='checkbox' name='record'></td><td>" + email + "</td><td class='sum_me' style='text-align: right;'>" + name + "</td></tr>";
$("table tbody").append(markup);
updateSum();
});
});
</script>
You can use tfooter after the tbody to hold this total value
<table id="countit">
<thead>
<tr>
<th width=50px>Delete</th>
<th width=150px style="text-align: center;">Inpayment of:</th>
<th width=50px style="text-align: center;">AMOUNT :</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
<tfoot>
<tr><td></td><td></td><td id="total"></td></tr>
</tfoot>
</table>
<input type="button" class="btn-success" value="Save Transaction" style="width: 150px; float: right;">
I am trying to dynamically add rows to a table to take orders and have created a javascript function for it.
function addnewrow()
{
var lastid = $("#table tr:last").attr("id");
var newid=lastid+1;
var newcolumn = document.createElement("tr");
newcolumn.id=newid;
newcolumn.innerHTML = "<td id='no"+newid+"'><a class='cut'>-</a>"+newid+"</td>"+
"<td>"+
"<ajaxToolkit:ComboBox ID='prod"+newid+"' runat='server' DataSourceID='SqlDataSource2' DataTextField='pname' DataValueField='pid' MaxLength='0' style='display: inline;'></ajaxToolkit:ComboBox>" +
"</td>"+
"<td><input type='number' required='required' min='1' name='quantity" + newid + "' /></td>" +
"<td id='price" + newid + "'></td>" +
"<td id='amount" + newid + "'></td>";
document.getElementById("table").appendChild(newcolumn);
}
I am doing this to get the values of all the elements in the code behind file to put them in database.
but due to this i get an error in the aspx.designer.cs page saying semicolon expected
protected global::AjaxControlToolkit.ComboBox prod" + newid + ";
ASP.NET Code
<table class="Grid" id="table">
<tr>
<td colspan="5">Enter Order Details</td>
</tr>
<tr>
<th>Sr No.</th>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Amount</th>
</tr>
<tr id="1">
<td><a class="cut">-</a>1</td>
<td>
<ajaxToolkit:ComboBox ID="prod1" runat="server" DataSourceID="SqlDataSource2" DataTextField="pname" DataValueField="pid" MaxLength="0" style="display: inline;"></ajaxToolkit:ComboBox>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:micoConnectionString %>" SelectCommand="SELECT [pid], [pname] FROM [Products]"></asp:SqlDataSource>
</td>
<td><input type="number" required="required" min="1" name="quantity1" /></td>
<td id="price1"></td>
<td id="amount1"></td>
</tr>
</table>
<a class="add" onclick="addnewrow()" href="#">+</a>
Check this
$("#btnAddSchedule").click(function () {
var trs = $("[id^=trSchedules]");
var numberofrows = trs.length;
var newtr = $('#' + trs[0].id).clone();
$(newtr).attr('id', $(newtr).attr('id').replace(/\d+/, numberofrows));
newtr.find("input,select,img").each(function () {
$(this).attr('id', $(this).attr('id').replace(/\d+/, numberofrows));
$(this).attr('name', $(this).attr('name').replace(/\d+/, numberofrows));
if ($(this).attr('type') != "hidden") {
$(this).val('');
}
else if ($(this).attr('id').indexOf('DataExportQueueID') == -1) {
$(this).val('');
}
if ($(this).attr("type") == "checkbox") {
$(this).removeAttr("checked");
$(this).parent().html($(this).parent().html().replace(/\d+/g, numberofrows));
}
if ($(this).attr("type") == "button") {
$(this).attr("onclick", "deleteSchedule(this,0);");
}
});
$('#' + trs[numberofrows - 1].id).after(newtr);
CrossCheckScheduleRows();
});
function CrossCheckScheduleRows() {
$('[id^=trSchedules]').each(function () {
var row = $(this);
var index = row[0].rowIndex - 2;
row.attr('id', row.attr('id').replace(/\d+/, index));
row.find("input,select,img").each(function () {
$(this).attr('id', $(this).attr('id').replace(/\d+/, index)).attr('name', $(this).attr('name').replace(/\d+/, index));
});
});
}
I use this for the same purpose, maybe it will help you
I am trying to make a table that can make a +, x, H and in different colors and then on click it draws on the table. Could anyone help me out? I don't expect you to write the full code but if you could maybe provide some advice and/or example code I would totally appreciate it!
<!HTML>
<html>
<head>
<title>JScript</title>
<script language="javascript">
function Design()
{
}
</script>
</head>
<body>
<table border="1px" cellpadding="30px">
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></td></tr>
</table>
Pattern Choice: <br>
<input type="radio" name="sign" value="plus"> Plus Sign <br>
<input type="radio" name="sign" value="X"> Letter X <br>
<input type="radio" name="sign" value="H"> Letter H <br><br>
Color Choice: <br>
<select name="color" size="5">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
</div>
<br><br>
<input type="button" value="Color It" onclick="Design()">
<input type="reset" value="Clear">
</body>
</html>
I don't know if you can see but I the <td name="h"> I thought that would be the way to go to fill in each cell at least for H and then I was going to use multiple names if they overlapped if that's even possible?
I did this using javascript
<html>
<head>
function Design() {
var desgn;
if (document.getElementById('r1').checked) {
desgn = document.getElementById('r1').value;
}
if (document.getElementById('r2').checked) {
desgn = document.getElementById('r2').value;
}
if (document.getElementById('r3').checked) {
desgn = document.getElementById('r3').value;
}
console.log(desgn);
var e = document.getElementById("list");
var colr = e.options[e.selectedIndex].value;
var tabs = document.getElementById("tbl");
var rows = tabs.rows.length;
var trs = tabs.getElementsByTagName("tr")[0];
var tds = trs.cells
var colms = tds.length
var table = document.getElementById("tbl");
for (var i = 0, row; row = table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
if (desgn == 'X') {
var y = rows - i - 1;
if (i == j || j == y) {
trs = tabs.getElementsByTagName("tr")[i];
trs.cells[j].style.backgroundColor = colr;
}
}
else if (desgn == 'plus') {
if (i == 2 || j == 2) {
trs = tabs.getElementsByTagName("tr")[i];
trs.cells[j].style.backgroundColor = colr;
}
}
else if (desgn == "H") {
if (j == 1 || j == 3 || i == 2 && j == 2) {
trs = tabs.getElementsByTagName("tr")[i];
trs.cells[j].style.backgroundColor = colr;
}
}
}
}
}
</script>
</head>
<body>
<table border="1px" cellpadding="30px" id="tbl">
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></td></tr>
</table>
Pattern Choice: <br>
<input id='r1' type="radio" name="sign" value="plus"> Plus Sign <br>
<input id='r2' type="radio" name="sign" value="X"> Letter X <br>
<input id='r3' type="radio" name="sign" value="H"> Letter H <br><br>
Color Choice: <br>
<select id='list' name="color" size="5">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
</div>
<br><br>
<input type="button" value="Color It" onclick="Design()">
<input type="reset" value="Clear" >
</body>
</html>
I did this using jquery
function Design() {
var desgn = $('body input[type=radio]:checked').val();
var colr = $('body select option:selected').text();
var MyRows = $('table').find('tr');
var MyCells = $('table').find('tr').find('td');
var MyColm = MyCells.length / MyRows.length
for (var i = 0; i < MyRows.length; i++) {
for (var j = 0; j < MyColm; j++) {
if (desgn == 'X') {
var x = MyRows.length;
var y = x - i - 1;
if (i == j || j == y)
$('body table tr:eq(' + i + ') td:eq(' + j + ')').css('background-color', colr);
}
else if (desgn == 'plus') {
if(i==2||j==2)
$('body table tr:eq(' + i + ') td:eq(' + j + ')').css('background-color', colr);
}
else if(desgn=="H") {
if (j == 1 || j == 3 ||i==2 && j==2)
$('body table tr:eq(' + i + ') td:eq(' + j + ')').css('background-color', colr);
}
}
}
}
</script>
</head>
<body>
<table border="1px" cellpadding="30px">
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td></td><td></td><td name="h"></td><td></td><td></td></tr>
<tr><td name="h"></td><td></td><td></td><td></td><td name="h"></td></tr>
</table>
Pattern Choice: <br>
<input type="radio" name="sign" value="plus"> Plus Sign <br>
<input type="radio" name="sign" value="X"> Letter X <br>
<input type="radio" name="sign" value="H"> Letter H <br><br>
Color Choice: <br>
<select name="color" size="5">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
</select>
</div>
<br><br>
<input type="button" value="Color It" onclick="Design()">
<input type="reset" value="Clear" onclick="clearall()">
</body>
</html>
You can have it this way
HTML
<table id="transactions_table_name" class="table project-table table-centered table-nowrap">
<thead>
<tr>
<th scope="col">Transaction Type</th>
<th scope="col">Code</th>
<th scope="col">Previous balance</th>
<th scope="col">Amount</th>
<th scope="col">Last Balance</th>
<th scope="col">Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JAVASCRIPT
for (let i = 0; i < transactions.length; i++) {
var transaction = transactions[i];
$("<tr><th scope='row'>" + transaction.type + "</th><td>" + transaction.code +
"</td><td>" + transaction.previousBalance + "</td><td>" + transaction.amount +
"</td><td> " + transaction.lastBalance + "</td><td>" + transaction.date + "
</td></tr>").appendTo("#transactions_table_name");
}
Credits to http://dotnetwithsqlserver.blogspot.com/2016/11/how-to-manipulate-and-fill-html-table.html