I am writing code to add rows dynamically on selecting the month and year. It should display rows of labels with all dates for that month.
I have written code for adding new row on button click and am stuck on adding date to label dynamically
<BODY>
<INPUT type="button" value="Add Row" id="addRow" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
</TABLE>
<%
int year= 2015,month = 10;
Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.YEAR, year);
calendar.set(Calendar.MONTH, month);
int numDays = calendar.getActualMaximum(Calendar.DATE);
SimpleDateFormat df = new SimpleDateFormat("dd/MMM/yyyy");
calendar.set(Calendar.DAY_OF_MONTH,1);
%>
<SCRIPT language="javascript">
var count=1;
var numDays = "<%=numDays %>";
while(count <= numDays-1 ) {
count++;
// calendar.set(Calendar.DAY_OF_MONTH,count); //error in this part when uncommented
$("#addRow").trigger("click");
}
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = "<%= df.format(calendar.getTime()) %>"; //new date here
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
}
</SCRIPT>
</BODY>
Not able to use calendar.set(Calendar.DAY_OF_MONTH,count) within the loop, so that date is incremented on each click. When running calendar.set(Calendar.DAY_OF_MONTH,1); it is displaying output as given in image
snapshot of output when setting DAY_OF_MONTH outside the loop
I have found the answer. Actually its a other way workout.
Have fetched the no of days in the calendar (from server date) and run a loop for each count trigger the addrow button incrementing the label value.
JS code =>
numDays = "<%= numDays%>";
while (count <= numDays - 1) {
count = count + 1;
$("#btnAddRow").trigger("click");
}
function addRow(tableID) {
var countCol = parseInt($('#dataTable').attr('data-countCol'), 10) || 1;
countRow = countRow + 1;
var index = $("#dataTable tr:last").attr("id").split("_")[1];
var rid = "r_" + (parseInt(index) + 1);
var tempRow = $("#dataTable tr:last").clone(true, true);
tempRow.attr("id", rid);
var checkCol = $('#dataTable tr:last td:first input');
checkCol.prop("check", true);
checkCol.prop("id", "check-" + index);
var dateCol = $('#dataTable tr:last td:nth-child(2) input');
dateCol.prop("readonly", true);
var pv_dt = dateCol.val().split("/");
pv_dt[0] = parseInt(pv_dt[0]) + 1;
var nw_dt = pv_dt.join("/");
$(tempRow).find('td:nth-child(2) input').val(nw_dt);
tempRow.find('td:nth-child(3) input').prop('name', "rom_" + parseInt(countRow) + "." + countCol);
tempRow.find('td:nth-child(4) input').prop('name', "waste_" + parseInt(countRow) + "." + countCol);
tempRow.find('td:nth-child(5) input').prop('name', "fh_" + parseInt(countRow) + "." + countCol);
tempRow.find('td:nth-child(6) input').prop('name', "ot-rom_" + parseInt(countRow) + "." + countCol);
tempRow.find('td:nth-child(7) input').prop('name', "ot-waste_" + parseInt(countRow) + "." + countCol);
tempRow.find('td:nth-child(8) input').prop('name', "ot-FH_" + parseInt(countRow) + "." + countCol);
$('#dataTable').append(tempRow);
}
Related
I have added records to a table that contains values in two text boxes and a button per each row. How can I get the record number of a particular button clicked by the user?
<table id="myTable">
</table>
<script>
var table=document.getElementById("myTable");
var i=0;
for(i; i<3; i++)
{
var row = table.insertRow(i);
var cell0=row.insertCell(0);
var element0=document.createElement("input");
element0.type="text";
element0.value = "Hello : " + i;
cell0.appendChild(element0);
var cell1=row.insertCell(1);
var element1=document.createElement("input");
element1.type="text";
element1.value = "Welcome : " + i*2;
cell1.appendChild(element1);
var cell2=row.insertCell(2);
var element2=document.createElement("input");
element2.type="button";
element2.value = "Clcik : " + i*i;
element2.onclick = function show_id() { alert("Record ID"); }
cell2.appendChild(element2);
}
</script>
Why can't you use an index for tracking the record?
Hoping this is the use case you are looking for. Include more details in case you need anything other than this.
<table id="myTable">
</table>
<script>
var table=document.getElementById("myTable");
var i=0;
for(i; i<3; i++)
{
const recordId = i+1;
var row = table.insertRow(i);
var cell0=row.insertCell(0);
var element0=document.createElement("input");
element0.type="text";
element0.value = "Hello : " + i;
cell0.appendChild(element0);
var cell1=row.insertCell(1);
var element1=document.createElement("input");
element1.type="text";
element1.value = "Welcome : " + i*2;
cell1.appendChild(element1);
var cell2=row.insertCell(2);
var element2=document.createElement("input");
element2.type="button";
element2.value = "Clcik : " + i*i;
element2.onclick = function show_id() {
alert("Record ID - " + recordId);
}
cell2.appendChild(element2);
}
</script>
How do I get the value of a Bootstrap TouchSpin element inside of a table? I'm currently getting nothing as I don't believe it is finding the element.
Creation of the touchspin and inserting into table
var table = document.getElementById("createOrderTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.id = 'row' + rowCount;
// TouchSpin element
var cell1 = row.insertCell(1);
var touchSpinID = 'touchspin' + rowCount;
cell1.innerHTML = "<input id='" + touchSpinID +"' type='text' value='1' name='" + touchSpinID +"'>";
cell1.id = 'cell' + touchSpinID;
//Init TouchSpin
$("input[name='" + touchSpinID +"']").TouchSpin({
verticalbuttons: true,
min: 0,
max: 100000000,
});
Iterating through the table and getting the value of the Touchspin, neither method below works.
var table = document.getElementById("createOrderTable");
var rowCount = table.rows.length;
var productArray = [];
for(i = 1; i < table.rows.length; i++){
var touchspinID = 'touchspin' + i;
var touchspinValue = 0;
cellID = 'cell' + touchspinID;
$(cellID).find(touchspinID).each(function(){
touchspinValue = this.val();
console.log(touchspinValue);
});
$("#createOrderTable tr").each(function () {
$('td', this).each(function () {
var value = $(this).find(touchspinID).val();
console.log(value);
})
})
}
Looking at your code, I believe the issue lies with touchspinID and cellID in that they're both missing the '#' to indicate that you're looking for elements with those specific ids.
Changing these two lines from:
var touchspinID = 'touchspin' + i;
cellID = 'cell' + touchspinID;
to:
var touchspinID = '#touchspin' + i;
cellID = '#cell' + touchspinID;
should fix your issue. Also, you don't need to use .each after the call to .find as the cell will only ever have one "touchspin" element and ids must always be unique:
var touchspinValue = $(cellID).find(touchspinID).val();
console.log(touchspinValue);
If the above doesn't solve your issue, include the table html in your question.
This question can be a duplicate.
I need add 24 rows in a html table with 8 columns on click of button. I look for some examples, and I tried this (code below), but only row is add. Someone could help? Thanks for attention.
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = 3;
for (var i = 0; i < 24; i++) {
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(i);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chbx";
var element2 = document.createElement("label");
if (i < 9) {
element2.innerHTML = "0" + i ;
}
else {
element2.innerHTML = i;
}
element2.name="lbl";
cell1.appendChild(element1);
cell1.appendChild(element2);
var cell2 = row.insertCell(i + 1);
cell2.innerHTML = "2";
var cell3 = row.insertCell(i + 2);
cell3.innerHTML = "3";
var cell4 = row.insertCell(i + 3);
cell4.innerHTML = "4";
var cell5 = row.insertCell(i + 4);
cell5.innerHTML = "5";
var cell6 = row.insertCell(i + 5);
cell6.innerHTML = "6";
var cell7 = row.insertCell(i + 6);
cell7.innerHTML = "7";
var cell8 = row.insertCell(i + 7);
cell8.innerHTML = "8";
rowCount++;
}
}
Check out this approach:
JS
var table = document.getElementById('table');
function addRows(table, rows, columns){
var row = '';
for (var i = 0; i < rows; i++){
row = '<tr>';
for(var j = 0; j < columns; j++){
row += '<td>' + j +'</td>'
}
row += '</tr>';
table.innerHTML += row
}
}
addRows(table, 24, 8);
HTML
<table id="table">
</table>
Check out this codepen.
I'm trying to create a calander that can later be styled with CSS. Here is the JS and HTML codes. There is a CSS stylesheet as well but its just used for color and positioning. In the Javascript, I would like to build the table based off the first and last days of the month and insert a new row at the end of each week. As is the Javascript does nothing. When you remove the first if statement, it seems to iterate only once. I'm not sure where I'm screwing up in trying to create the table.
function setDate() {
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth();
var day = today.getDate();
document.getElementById("myDay").value = day;
document.getElementById("myMonth").value = month;
document.getElementById("myYear").value = year;
}
function buildCalendar() {
var firstDate = new Date(document.getElementById("myYear").value, document.getElementById("myMonth").value, 1);
var weekDay = firstDate.getDay();
var theDate = firstDate.getDate();
var theMonth = firstDate.getMonth();
var theYear = firstDate.getFullYear();
var newDay = new Date(theYear, theMonth + 1, 1);
var lastDate = new Date(newDay - 1);
var lastDay = lastDate.getDate();
document.write("<table class='caltable' border='1'><tr><th>");
document.write("<tr><th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th>");
document.write("</th></tr>");
var col = 0;
for (var i = theDate; i < lastDay + 1; i++) {
if (col == 0) {
document.write("<tr><td>" + i "</td>");
}
if (col == 6) {
document.write("<td>" + i + "</td></tr>");
col == 0;
} else {
document.write("<td>" + i + "</td>");
col++;
}
}
document.write("</table>");
}
function getMonthName() {
var e = getElementById("myMonth").selectedIndex;
var monthName = e.options[e.selectedIndex].text;
return monthName;
}
Here is the HTML file. It's basically just a wrapper div with some other divs inside for holding the calendar eventually a scheduler, as well as the current date. Right now I'm simply trying to get the the table (see the javascript) to build. Ideally it would be in the div with the id "bottomLeft".
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href = "./CSS/calendar.css">
<script type = "text/javascript" src = "./Calendar/calendar.js"></script>
<script type = "text/javascript" src = "./Calendar/task.js"></script>
</head>
<body onLoad = "setDate(); buildCalendar();">
<div id = "wrapper">
<div id = "left"> Left Div </div>
<div id = "right"> Right Div </div>
<div id = "bottomLeft"> Shows calendar </div>
<div id = "topLeft"> Day:<input id = "myDay" type="number" min = "1" max = "31">Month:<select id = "myMonth"><option value = "0">January</option> <option value = "1">February</option><option value = "2">March</option><option value = "3">April</option><option value = "4">May</option><option value = "5">June</option><option value = "6">July<option value = "7">August</option><option value = "8">September</option><option value = "9">October</option><option value = "10">November</option><option value = "11">December</option></select> Year:<input id = "myYear" type = "number" min = "100"> TopLeft Div shows form components for date </div>
<div id = "topRight"> Shows the form to add task </div>
<div id = "bottomRight"> Show list of tasks </div>
</div>
</body>
</html>
In addition to the mistakes Ceesie123456 mentioned, you need to remove the extra <tr><th> from the opening table tag string. As a means of getting the calendar into the bottomLeft div, you can use set the element's innerHTML property. Finally, you're missing a piece of logic which check for when the end of the calendar is not the end of a row, which means the table won't line up correctly. So, an example:
function buildCalendar(){
var firstDate = new Date(document.getElementById("myYear").value, document.getElementById("myMonth").value, 1);
var weekDay = firstDate.getDay();
var theDate = firstDate.getDate();
var theMonth = firstDate.getMonth();
var theYear = firstDate.getFullYear();
var newDay = new Date(theYear, theMonth + 1, 1);
var lastDate = new Date(newDay - 1);
var lastDay = lastDate.getDate();
var tableString = ("<table class='caltable' border='1'>");
tableString = tableString + ("<thead><tr><tr><th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th></tr></thead>");
tableString = tableString + "<tbody>";
var col = 0;
for (var i = theDate; i <= lastDay; i++)
{
if(col == 0)
{
tableString = tableString + ("<tr>");
}
tableString = tableString + "<td>" + i + "</td>";
if (col == 6 || i == lastDay)
{
tableString = tableString + ("</tr>");
col = 0;
}
else
{
col++;
}
}
tableString = tableString + ("</tbody></table>");
document.getElementById("bottomLeft").innerHTML = tableString;
}
U made a few mistakes in ur Javascript code.
if (col == 6)
{
document.write("<td>" + i + "</td></tr>");
col == 0; //this should be changed to col = 0; with col = 0; u set col to 0.
}
and
if(col == 0)
{
document.write("<tr><td>" + i "</td>");
}
u should change it to:
if(col == 0)
{
document.write("<tr><td>" + i + "</td>"); // combine string with variable and string.
}
I am relatively new to Javascript. Any help will be very much appreciated.
function insertAnswer(){
//table
var innerTable = document.getElementById('inner_table');
//the new row to be placed before this button
var buttonAddAnswer = document.getElementById ("addMoreAnswer");
var row = document.createElement('tr');
var col = document.createElement('td');
var col2 = document.createElement('td');
var newCount = counter + 1;
col2.innerHTML = (counter + 1) + " <input type='text' name='answer" + newCount + "' id='answer" + newCount + "' class='mlselect' maxlength='200' size='90' >   <label>Go to:</label><input type='text' name='goTo' id='goTo' class='mlselect' maxlength='10' size='10' >";
row.appendChild(col);
row.appendChild(col2);
innerTable.appendChild(row);
//innerTable.parentNode.insertBefore(row, buttonAddAnswer);
counter++;
}
If I want to insert my row before the button, how do I go about it? I have tried toinsertBefore, but it does not seem to work. Can someone please steer me towards the right direction?