I'm trying to copy one row of a table and append a radio button to it. There are 3 rows that i declared in the html and an add button in jquery which can add names to the table. All of these rows are appended with a delete button. when I click the start button I want the names to go to the next div without the delete button and append a radio button to it. and the user should be able to vote the names.when i add names, an extra radio button without name value is passed to the div. I can't figure out why. I'm trying to make a voting system using jquery without using any databases(temporary). Please help. I can't figure out why the extra radio button is getting passed. It's only passed when i add candidate using the add button.
here's my code:
$(document).ready(function()
{
$('#start').click(function()
{
$("#div1").hide();
$("#buttonset1").hide();
$("#div2").show();
$("#voterName").val("")
if( $('#candidateTable thead tr').children().length = 1)
{
if( $('#newTable thead').children().length == 0 )
{
$('#newTable thead').append('<tr></tr>');
}
$('#newTable thead tr').append('<th>' + $($('#candidateTable thead tr').children()).text() + '</th>');
$('#candidateTable tbody tr').each(function(i)
{
if( $('#newTable tbody').children().length != $('#candidateTable tbody').children().length)
{
$('#newTable tbody').append('<tr></tr>');
}
$('#newTable tbody tr:nth-child(' + (i + 1) + ')').append('<td>' + $($(this).children()[0]).text()+'</td>'+'<td><input type="radio" class="radiobutton"></td>');
});
}
});
//delete candiates
$("#candidateTable").on('click', '.del', function()
{
$(this).closest('tr').remove();
});
//add candidate
$("#add").click(function()
{
//adding candidates
var candidatename = $("#candidatename").val();
if(candidatename.length!=0)
{
$("#candidateTable tbody").append('<tr><td>'+ candidatename +'</td>'+'<td>'+'<button class="del" id="Delete">Delete</button>'+'</td><tr>');
$("#candidatename").val('');
}
});
});
$(document).ready(function()
{
$("#final").click(function(){
$("#div2").hide();
$("#div4").show();
});
});
table, tr, th, td{
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> Voting System </h1>
<body>
<div id="div1">
<table id="candidateTable">
<thead>
<tr>
<th id="candidatelist">Candidate Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>XXXX</td>
<td><button class="del" id="Delete">Delete</button></td>
</tr>
<tr>
<td>YYYY</td>
<td><button class="del" id="Delete">Delete</button></td>
</tr>
<tr>
<td>ZZZZ</td>
<td><button class="del" id="Delete">Delete</button></td>
</tr>
</tbody>
</table>
</div>
<div id="buttonset1">
<br>
<br>
<input type="text" id="candidatename">
<button id="add">Add</button>
<br>
<br>
<button id="start">Start</button>
<br>
<br>
</div>
<br>
<form action="javascript:void(0)">
<div id="div2" style="display: none;">
<div id="buttonset2">
<label>Name</label>
<input type="text" name="Name" id="votername">
<button id="vote">Vote</button>
<br>
<br>
<table id="newTable">
<thead>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</form>
<br>
<br>
<button id="final">Submit Votes</button>
</div>
</div>
<br>
<br>
<br>
<div id="div4" style="display:none;">
<h2>
Result
</h2>
</div>
</body>
</html>
Change this line of code:
$("#candidateTable tbody").append('<tr><td>'+ candidatename +'</td>'+'<td>'+'<button class="del" id="Delete">Delete</button>'+'</td><tr>');
with this:
$("#candidateTable tbody").append('<tr><td>'+ candidatename +'</td><td><button class="del" id="Delete">Delete</button></td></tr>');
in your add function. Now it will not add one extra row.
Full working example link is below
enter link description here
Related
I am working on this website and as you can see i have a table of content with some Filters on top to filter the results. Basically you click on the checkboxes and you can filter the results between rows
I am actually trying to use this script to try to filter the results but does not works
$(document.body).on('change', "#zimmer4", function() {
$("#tableID tr.zimmer4").toggle(!this.checked);
});
$(document.body).on('change', "#zimmer3", function() {
$("#tableID tr.zimmer3").toggle(!this.checked);
});
$(document.body).on('change', "#zimmer2", function() {
$("#tableID tr.zimmer2").toggle(!this.checked);
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Zimmer
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<form class="filter">
<input id="zimmer4" class="unchecked" type="checkbox">4.5
<br>
<input id="zimmer3" class="unchecked" type="checkbox">3.5
<br>
<input id="zimmer2" class="unchecked" type="checkbox">2.5
<br>
</form>
</ul>
</span>
HTML Table Rows:
<div id="wrap" class="tabelle">
<table class="table" id="tableID">
<thead>
<tr>
<th>Wohnung</th>
<th>Zimmer</th>
<th>Stockwerk</th>
<th>Nettomiete</th>
<th>Bruttomiete</th>
<th>PDF</th>
</tr>
</thead>
<tbody>
<tr class="row1 row2OG row3OG zimmer3 zimmer2 range1 range2 range3 range5">
<td>1.001</td>
<td>4.5</td>
<td>EG / 1. OG</td>
<td>2252</td>
<td>2500</td>
<td><img src="/img/pdf.png" alt=""></td>
</tr>
</tbody>
</table>
</div>
What am i doing wrong?
Thanks in advice
Using the code from your example, it should work.
Also check the console on your site, it gives an error:
Uncaught TypeError: $ is not a function
I created a fiddle from your code, but editted a small thing: I assume you want to display the rows wich checkboxes are selected. Instead of hiding them when you select the checkbox:
https://jsfiddle.net/pp34rxhp/1/
use this code,
final code:
<html>
<head>
</head>
<style>
.hid {
display: none;
}
</style>
<body>
<select id="zimmer">
<option value="all">Select Zimmer</option>
<option value="2.5">2.5</option>
<option value="3.5">3.5</option>
<option value="4.5">4.5</option>
</select>
<table id="tab">
<tr><th>Wohnung</th><th>Zimmer</th><th>Stockwerk</th></tr>
<tr class="2.5"><td>xxx</td><td>2.5</td><td>www</td></tr>
<tr class="4.5"><td>xx</td><td>4.5</td><td>www</td></tr>
<tr class="3.5"><td>aaa</td><td>3.5</td><td>www</td></tr>
<tr class="3.5"><td>qqq</td><td>3.5</td><td>www</td></tr>
<tr class="3.5"><td>fff</td><td>3.5</td><td>www</td></tr>
<tr class="4.5"><td>ppp</td><td>4.5</td><td>www</td></tr>
</table>
<script>
var ele = document.getElementById("zimmer");
var rows = document.getElementById("tab").rows;
ele.addEventListener('change',filterTable);
function filterTable() {
for(var i = 1; i < rows.length; i++){
if(rows[i].classList.contains(this.value))
rows[i].classList.remove("hid");
else if (this.value == "all")
rows[i].classList.remove("hid");
else
rows[i].classList.add("hid");
}
}
</script>
</body>
</html>
I am dynamically adding elements. However when I try and serialize the form, none of the dynamically generated elements are serialized.
This is the function I'm using to add elements to the page :
function addObjects(IDname,classname)
{
//to add more objects
var number;
switch(classname)
{
case "name":
number = no_Name++;
break;
case "part":
number = no_part++;
break;
}
var id = classname + number;
$("#"+IDname).append('<tr class="'+id+'"><td><input id="'+id+'" class="'+id+'" type="text"> <button class="'+id+'" onclick=removeAdditions("'+id+'")>x</button></td></tr>');
}
The page looks like this:
<html>
<head>
<script src="Controller.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//in order to prevent form reload when button click occurs
$(document).ready(function(){
document.getElementById("ReportForm").onsubmit = function (event) { event.preventDefault(); }
});
</script>
</head>
<body>
<div class="detailsPane" id="detailsPane1" >
<form id="ReportForm" name="ReportForm" >
<table style="width: 100%;">
<tbody>
<tr>
<td>
1. Describe the Status briefly-
</td>
<td>
<textarea id="StatDescp" name="StatDescp"></textarea>
</td>
</tr>
</tbody>
</table>
<br>
<table style="width: 100%;">
<thead>
<tr>
<th colspan="4" align="top">
Part Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align:top;">
Part Name:
</td>
<td style="vertical-align:top;">
<table >
<tbody id="PartName">
<tr class="partname0">
<td><input class="part_name" type="text"> <button onclick='addObjects("PartName","part_name");'>+</button></td>
</tr>
</tbody>
</table>
</td>
<tbody>
</table>
</form>
</div>
<div id="buttonDiv" >
<a class="bottomLeftResultDiv" id="messageBox"></a>
<input type="button" id="saveButton" value="Save" style="width:85px" onclick="save();" />
</div>
</body>
</html>
And finally here is the save Button.
function save() {
var select = document.getElementById('newReportPane');
var contents = $('#ReportForm').serialize();
contents = contents.replace(/=on/g, "=checked");
contents = contents.replace(/\+/g, " ");
$("#messageBox").html("Saving report...");
console.log(contents);
$.post("/Report/Report1", { action: "save", content: contents }, function (data) {
if (data != "ACK")
$("#messageBox").html("Unable to save.");
else
$("#messageBox").html("Report saved successfully");
});
}
When I click on the save button, it only posts this StatDescp= without any of the dynamically generated elements.
I really can't figure out why.
Any help would be appreciated.
Give a name= attribute to each of your added inputs.
From http://api.jquery.com/serialize/
For a form element's value to be included in the serialized string,
the element must have a name attribute.
I want to do disable in another select box when the other selection box is selected (option value = 3) in the same row.
There are many rows in a table. In each row, there has three select box in each column. If I selected the select box in first column and the option value of selected box is 3, I want to make disable the second select box in the same row.
I wrote the code as the followings.
my code is not working when the new row added in the table after I click Add Row button. I need some guideline.
javascript :
<!-- add new row -->
<script>
$(document).ready(function() {
var id = 0;
// Add button functionality
$("#addrow").click(function() {
id++;
/*var master = $(this).parents("table.fancyTable");*/
var master = $(this).parents("table.stdform");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone();
prot.attr("class", "");
/*prot.find(".id").attr("value", id);*/
master.find(".fancyTable tbody").append(prot);
$(".fancyTable tbody tr:nth-child(odd)").addClass("odd");
$(".fancyTable tbody tr:nth-child(even)").addClass("even");
});
});
</script>
<!-- change select box -->
<script>
$(document).ready(function() {
$('.processing_code').bind('change', function(){
var data = $(this).val();
alert(data);
if(data == 3){
$(this).parent('td').siblings().find(".parameter1").attr("disabled", "true");
}
});
});
</script>
css :
<style>
.fancyTable .prototype {
display:none;
}
.odd{
background-color: #ddd;
}
.even{
background-color: #eee;
}
</style>
jsp :
<input type="button"
name="btn_JobTempReg_addrow" class="mediumbutton"
value="Add Row" id="addrow" />
<div class="container_12 ">
<div class="grid_job_mod height400">
<table class="fancyTable" id="sortable-table"
cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th>header one</th>
<th>header two</th>
<th>header three</th>
</tr>
</thead>
<tbody id="job-tbody">
<tr class="prototype">
<td>
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="1" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</td>
<td>
<s:select name="parameter1" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter1" style="width: 140px" id="parameter1" cssClass="parameter1"/>
</td>
<td>
<s:select name="parameter2" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter2" style="width: 140px" id="parameter2" cssClass="parameter2"/>
</td>
</tr>
<s:iterator value="p_jobTmpEnt" var="temEnt" status="status">
<tr>
<td>
<s:if test="#temEnt.processing_code == 1">
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="1" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</s:if>
<s:if test="#temEnt.processing_code == 2">
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="2" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</s:if>
<s:if test="#temEnt.processing_code == 3">
<s:select list="#{'1':'One','2':'Two','3':'Three' }" value="3" key="processing_code" id="processing_code" cssClass="processing_code"></s:select>
</s:if>
</td>
<td>
<s:select name="parameter1" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter1" style="width: 140px" id="parameter1" cssClass="parameter1"/>
</td>
<td>
<s:select name="parameter2" list="p_result_group" listKey="group_id" listValue="group_name" headerValue="parameter2" style="width: 140px" id="parameter2" cssClass="parameter2"/>
</td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
</div>
Thanks in advance.
$('.processing_code').change(function() {
if($(this).val() ==3)
$(this).next('select').attr("disabled", "true");
else
$(this).next('select').attr("disabled", "false");
});
try this..
<script>
$(document).ready(function() {
$('.processing_code').bind('change', function(){
var data = $(this).val();
if(data == 3){
$(this).parent('td').siblings()
.find(".parameter1")
.attr("disabled", "disabled");
}
});
});
</script>
I have a page that the user can dynamically add rows or tables to. I need to count the rows on a given table using jQuery to see if I just need to insert a row or a row and the header. Right now the count is just counting all rows on all tables. I am using jQuery 1.7.2 and the jquery templeter.
<div id="ClonePoint">
<button id="exitSection" class="closesection"><span>Close</span></button> <br /> <br />
<button class="btnEncode" id="buttonEncode">Encode</button>
<input id="encryptedTokenClone" />
<button class="btnDecode" id="buttonDecode">Decode</button>
<table class="tokenTable" cellpadding="3px">
<tbody class="tokenBody" >
</tbody>
</table>
<button id="addRow" class="addingRow">Add Row</button>
</div>
And the jQuery that is adding the rows
$('#BackgroundArea').on('click', '.addingRow', function () {
var selectedDiv = $(this).parent();
var selectedTable = $(selectedDiv).children('.tokenTable');
var rowCount = 0;
rowCount = $('.tokenTable .tokenBody').children('tr').length;
if (rowCount > 0) {
$("#tokenAddRowTemplate")
.tmpl()
.appendTo(selectedTable);
} else {
$("#TableHeader")
.tmpl()
.appendTo(selectedTable);
$("#tokenAddRowTemplate")
.tmpl()
.appendTo(selectedTable);
}
});
The html for the insert is
<script id="TableHeader" type="text/html">
<tr id="TableHead">
<th width="55px">Delete Row</th>
<th align="right"> Key </th>
<th align="left"> Value </th>
</tr>
</script>
<script id="tokenAddRowTemplate" type="text/html">
<tr id="tokenRow">
<td class="deleteRow" id="tokenCell">
<button class="deleteRow">
<span>delete row</span>
</button>
</td>
<td class="keyValue" id="tokenCell">
<div class="edit" contenteditable="true"></div>
</td>
<td class="valueValue" id="tokenCell">
<div class="edit" contenteditable="true"></div>
</td>
</tr>
</script>
This should give tr count in your table.
$("#yourTableId tr").length
Is this what your are looking for ?
If each table is followed by its own "Add Row" button:
var $table = $(this).prev(),
rowCount = $table.find('.tokenBody').children('tr').length;
if (rowCount > 0) {
...
This assumes the "Add Row" button immediately follows the table.
To make the code less brittle, you could consider using a container element, like this:
<div class="tokenTableContainer">
<table class="tokenTable">
...
<table>
<button class="addingRow">...</button>
</div>
Then you can do this:
$('.addingRow').click(function() {
var $table = $(this).closest('.tokenTableContainer').find('.tokenTable');
...
});
I want the serial no: to increase whenever a row is inserted dynamically. and when any row is deleted whether in the beginning or in the end or in-between, the numbers should rearrange themselves in proper order. I'm a fresher and could not get a logic on how to do it. Can anyone pls guide me on the same. Thanks in advance for the support.
I have given my sample coding below. On clicking the "(+)" button, the row increases automatically. when that is happening, i want the serial no also to increment automatically. And when any row is deleted, (even in middle of the table), then the numbers should automatically adjust themselves in proper order. Pls guide me on the same.
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
id=1;
var serial =1;
$('#butVal').click(function(){
var master = $(this).parents("#table-2");
id++;
var sample = master.find('.tabRow').clone();
sample.attr("id", id + "item");
master.find('.tabRow').removeClass('tabRow');
master.find('tbody').append(sample);
//alert(master);
//alert(sample);
//alert(sample.html());
//alert(master.html());
var rowLen = $('#table-2 > tbody >tr').length;
//alert(rowLen);
if(rowLen>9)
{
alert("no of row is reached 10");
}
}
);
$('table#table-2 button.remove').live('click', function(){
if($("table#table-2 tbody tr").length > 1)
{
if($("table#table-2 tbody tr").index($(this).parents('tr')) ==$("table#table-2 tbody tr").length -1)
{
$(this).parents('tr').prev().addClass("tabRow");
}
$(this).parents('tr').remove();
}
else
{
alert("you can.t remove this record");
}
} );
});
//jquery ends here
</script>
<style type="text/css">
.total
{
border:1px solid black;
width:90%;
height:1250px;
margin-left:auto;
margin-right:auto;
}
.add
{
width:100%;
}
.add select,input
{
width:100%;
}
</style>
</head>
<body>
<div class="total">
<table id="table-2" class="add" border ="1">
<thead>
<tr><th class="small"> S.No</th><th> Product Status </th> <th> Stock Status</th> <th class="sizing"> Description</th> <th> Quantity </th> <th> Price </th> <th> Total </th >
<th> <button id="butVal"> + </button></th></tr>
</thead>
<tbody>
<tr class="tabRow" id="1item">
<td class="sno"> </td>
<td><select><option> New </option><option> Old </option></select> </td>
<td><select><option> In Stock </option><option> Out Of Stock </option></select> </td>
<td> <input type="text" name="desc"/> </td>
<td> <input type="text" name="qty"/> </td>
<td> <input type="text" name="price"/> </td>
<td> <input type="text" name="total"/> </td>
<td><button class="remove">Remove</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> Grand Total </td>
<td> </td>
<td> <button id="proceed" onClick="payment();"> Proceed </button> </td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
I made some changes to your code at jsfiddle.net. The link is: http://jsfiddle.net/2nzgG/30/. All my comments can be found in the javascript section. I hope this is what you are looking for. Let me know if you need anything else.
EDIT:
I also added the code below, but the comments will be found in the link...
$(document).ready( function() {
$('#butVal').click(function(){
var rowLen = $('tr.tabRow').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow:first").clone(true).appendTo("#table-2>tbody");
$(".tabRow:last").children("td").children("input").each(function(index, element){
$(element).val("");
});
}
});
$(document).on("click", "button.remove", function(){
if($(this).parents("tr").siblings("tr.tabRow").length > 0)
{
$(this).closest("tr.tabRow").remove();
}
else
{
alert("you can.t remove this record");
}
});
//FOR Serial Number- use ON
$(document).on("click", ".add, .remove", function(){
$("td.sno").each(function(index,element){
$(element).text(index + 1);
});
});
});