Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Answers Viewqa Date-Calendar Dyanmically Adding Rows

Have Programming Question? Ask it here!
 
 
 


Santhosh Rajendran
Dyanmically Adding Rows
1 Answer(s)      a year and 5 months ago
Posted in : Date-Calendar


Hi sir Am doing project in that i need to add date picker in dynamically adding rows but the dates are storing in first test box only ill paste my code debug that code as soon as possible.

Regards, Santhosh..

<HTML>
<HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <link rel="stylesheet" type="text/css" href="css/masterStyle.css" />
    <link rel="stylesheet" type="text/css" href="css/masterStyle.css" />
        <script language="javascript" type="text/javascript" src="datetimepicker.js"></script>
       <link rel="stylesheet" type="text/css" href="datepicker.css"/>
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" href="/resources/themes/master.css" type="text/css" />
<link
 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
 rel="stylesheet" type="text/css" />
<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
 type="text/javascript"></script>
<script
 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
 type="text/javascript"></script>
<script
 src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"
 type="text/javascript"></script>
<script src="/resources/scripts/mysamplecode.js" type="text/javascript"></script>
    <SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;

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

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;

                }
            }
        }


        $(document).ready(function() {

             var myCounter = 1;
             $(".myDate").datepicker();

             $("#moreDates").click(function(){

              $('.myTemplate')
               .clone()
               .removeClass("myTemplate")
               .addClass("additionalDate")
               .show()
               .appendTo('#importantDates');

              myCounter++;
              $('.additionalDate input[name=inputDate]').each(function(index) {
               $(this).addClass("myDate");
               $(this).attr("name",$(this).attr("name") + myCounter);
              });

              $(".myDate").on('focus', function(){
                  var $this = $(this);
                  if(!$this.data('datepicker')) {
                   $this.removeClass("hasDatepicker");
                   $this.datepicker();
                   $this.datepicker("show");
                  }
              });

             });

            });

    </SCRIPT>
</HEAD>
<BODY>
 <form name="frm">
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />



    <TABLE id="dataTable" width="350px" border="1">

        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD><INPUT type="text" name="txt"/></TD>
            <td><select name="expYears">
                                 <%
                                        for (int i = 0; i < 10; i++) {

                            %>
                            <option value="<%=i%>"><%=i%></option>
                            <%
                                        }
                            %>
                         </select></td>

            <TD>
                <SELECT name="primaryskill">
                    <option value="">Select Skills</option>
                         <option value="Java">Java</option>
                         <option value=".NET">.NET</option>
                         <option value="Database">Database</option>
            </TD>
             <td><input  type="text" name="date" id="cdate">


<input type=button value="Select Date" onclick="displayDatePicker('date', this);">
</td>
           <TD><input type="text" id="dates" name="availabilityexpires" size="30">


                         <a href="javascript:NewCal('dates','DDMMYYYY',false,24)"><img src="cal.gif"  alt="Pick a date"></a></TD>
            <TD><div id="importantDates">

       <p>
        <input class="myDate" type="text" name="inputDate1" size="10" value=""/> (mm/dd/yyyy)
       </p>

      </div></TD>
        </TR>
    </TABLE>
 </form>
</BODY>
</HTML>

Advertisement
View Answers

November 19, 2012 at 5:45 PM


Here is a code that allow the user to add and remove row from the table.

<HTML>
<HEAD>
    <TITLE> Add/Remove rows</TITLE>
    <SCRIPT language="javascript">
        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 = "text";
            cell1.appendChild(element1);



            var cell3 = row.insertCell(1);
            var element2 = document.createElement("input");
            element2.type = "text";
            cell3.appendChild(element2);


        }

        function deleteRow(tableID) {

            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            var lastRow = table.rows.length;
            if (lastRow > 1) table.deleteRow(lastRow - 1);
        }

    </SCRIPT>
</HEAD>
<BODY>

    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="text" /></TD>

            <TD> <INPUT type="text" /> </TD>
        </TR>
    </TABLE>

</BODY>
</HTML>


Related Tutorials/Questions & Answers:
Dyanmically Adding Rows
Dyanmically Adding Rows  Hi sir Am doing project in that i need to add date picker in dynamically adding rows but the dates are storing in first test... rows in HTML table </TITLE> <link rel="stylesheet" type="text/css
Dyanmically Adding Rows with Date Picker
Dyanmically Adding Rows with Date Picker  Hi Sir, I am doing a project in that i need to add rows dynamically with date picker inside row, send me code as soon as possible. Regards, Santhosh
Advertisements
Adding checkbox in table using that delete table rows
Adding checkbox in table using that delete table rows  I need coding... that checkbox select more than than one rows,and using delete button i want to delete the selected rows using swing in java
Adding an employee
Adding an employee  coding for adding an employee
adding a dialogue
adding a dialogue  Blockquote Hi can you help with the program below,the program is a loop that prints out a code and a quantity when prompt for the user input.what I need is to modify the code to incorporate a dialogue asking
adding loop
adding loop  Hi I have a program that is not compiling when I add a loop can you help me?The program below is compiling without the loop. > Blockquote mport java.util.*; import java.text.*; import java.util.Scanner
jtable-adding a row dynamically
jtable-adding a row dynamically  hi..i am doing a project... the application there are 3 rows and 4 columns which is default bt when we we have... time if we run a project it must show the default 3 rows and 4 columns
Adding two numbers
Adding two numbers  Accepting value ffrom the keyboard and adding two numbers
javascript adding a value to an array
javascript adding a value to an array  How to add a value to a function argument or an array in JavaScript
adding view to viewcontroller
adding view to viewcontroller  How to add a frame window that opens on button click .. in iPhone application
adding groups in contacts
adding groups in contacts  how to add groups in contacts using servlet and jsp????pls help.thanku in advance
adding buttons - Swing AWT
adding buttons  can u plzz explain how to add button to a dialog box and make them perform some event on the image loaded on the panel
adding buttons - Swing AWT
adding buttons  can u plzz explain how to add button to a dialog box and make them perform some event on the image loaded on the panel
Adding photo to iPhone simulator
Adding photo to iPhone simulator  Hi, there is no photo in my iPhone simulator.. how can i add one? Please suggest. Thanks
adding the delete code
adding the delete code  hello sir... i need to add a delete button... { ArrayList<String> rows = new ArrayList<>(); FileWriter...); Collections.sort(rows); writer = new FileWriter("User.dat
testcase for adding - JUNIT
testcase for adding  hi deepak...I am new to junit.can u send me a JUnit test case for adding or multiplying of two numbers.please i need it urgently
Adding Jar into Eclipse
Adding Jar into Eclipse  Hi, Please provide Step by step procedure to add jar, tld files and configurations in Eclipse Helios version and i am using Jboss5. Thanks&Regards, Shiva s
Dynamically adding textbox and labels
Dynamically adding textbox and labels  Sir, In my application I want to insert texbox and labels dynamically and want to insert database field value in that generated label. Plz help me, Thanks in advance
Comparison of corresponding rows in a DB
Comparison of corresponding rows in a DB  How to compare corressponding rows in a database using Java????? ex...!!! Thankin u
Adding customitem in canvas in J2ME?
Adding customitem in canvas in J2ME?  In J2ME how should we add a customitem inside the canvas.Because i need to perform key event handling for customitem.The key event handling is allowed in canvas not in form.So i try to use
webservices adding in eclipse
webservices adding in eclipse  hi team, i am working on webservices, please guide me how to add webservices in eclispe with step by step and give some examples also.   Please visit the following link: http
Adding images in itext pdf
Adding images in itext pdf  Hi, How to add image in pdf file using itext? Thanks   Hi, You can use following code: PdfWriter.getInstance(document,new FileOutputStream("imagesPDF.pdf")); Read more at Inserting
Count Rows - JSP-Servlet
Count Rows  How to count rows in Java. Thanks
Grid rows delete issue
Grid rows delete issue  I have a grid having rows with Remove button to remove rows,But we also havae an facility to remove those rows on onchange event of dropdown also,so if we delete middle row and then remove all rows
Java: Adding Row in JTable
Java: Adding Row in JTable   how about if we already have the JTAble created earlier. And i just found nothing to get its DefaultTableModel, thus, I can't call insertRow() method. Is there any work around for this? I found
Adding JTable into existing Jframe.
Adding JTable into existing Jframe.  i need to add JTable into this code pls help me.. package Com; import Com.Details; import java.awt.Color...(100,60,1300,600); add(pane); //Action Listener for button //for adding new
Adding JTable into existing Jframe.
Adding JTable into existing Jframe.  i need to add JTable into this code pls help me.. package Com; import Com.Details; import java.awt.Color...(100,60,1300,600); add(pane); //Action Listener for button //for adding new
Adding JTable into existing Jframe.
Adding JTable into existing Jframe.  i need to add JTable into this code pls help me.. package Com; import Com.Details; import java.awt.Color...(100,60,1300,600); add(pane); //Action Listener for button //for adding new
Adding checkbox to List as item
Adding checkbox to List as item   can we add checkox to List   Hi Friend, Try the following code: import java.awt.*; import javax.swing.*; import java.awt.event.*; public class CheckBoxInList{ public static void
How to sort the rows in SQL?
How to sort the rows in SQL?  How to sort the rows in SQL?   Hi, Here is the answer, The ORDER BY clause allows you to sort the records in your result set. The ORDER BY clause can only be used in SELECT statements
How to insert rows in jTable?
How to insert rows in jTable?  Hi, I need to take input from user using JTable. I want an empty row to appear after clicking a insert button. The values will be entered in this empty row. I have searched on this but could
Adding button to each row for the table and adding row to another table
Adding button to each row for the table and adding row to another table  Hi I need to add button to each line in the table(Table data is retrived form database) and need to add that column data which we click in the specified
problem in adding a fullscreen frame nd adding a glass pane to it
problem in adding a fullscreen frame nd adding a glass pane to it  hi , here is my code import java.awt.*; import javax.swing.*; import java.awt.ToolKit; class MyFrame extends Jframe{ Container c; JPanel glass; MyFrame
Adding a text file - Java Beginners
Adding a text file  Hello, I need a program that will search a text file of strings representing numbers of type int and will write the largest and the smallest numbers to the screen. The file contains nothing but strings
Adding .txt files in a given directory
Adding .txt files in a given directory  I want to read number of XML files from a given directory and extract tag value from body tag and add each tag value as one .txt file in a given directory? I have extracted tag values
Adding a Reports tap in table pool
Adding a Reports tap in table pool  strong textHow to write a code to create a report in java using eclipse and link that report in jsp file that is written in jsf. I have to edit a jsp file that is written jsf there is a table
Adding maven plugin to Eclipse ide
Adding maven plugin to Eclipse ide  Hi, I want to add the maven plugin to Eclipse ide. But it asking logging credential. May i know which logging credentials and who we get the logging credentials . Given process i am using
Adding A Primary Key to an Existing Table
Adding A Primary Key to an Existing Table   Been trying to add a primary key to a MySQL table using Java for two days with no success. I'm new to Java and JDBC so bear patience with me. It connects to the database without problem
Php Sql num rows
Php Sql num rows This example illustrates how to find number of rows... and find the number of rows of the table by mysql_num_rows methods. The output...);   $num_rows = mysql_num_rows($result);   
adding two numbers - Java Beginners
adding two numbers  hii friends....... this is my program:- import java.io.*; import java.util.*; import java.math.*; public class Add2Numbers{ public static void main(String args[])throws IOException{ int[] x=new
adding some value to new column
adding some value to new column   how to update a column having some value into new column that also have some value i need to add this two value in java using result set we can get all the column data but how to add these value
adding of two numbers in designing of frame
adding of two numbers in designing of frame  hello sir, now i'm create two textfield for mark1&mark2 from db.how to add these two numbers in another one text field.how to write a coding... if u have another one idea pls
how to write a query for adding records in database
how to write a query for adding records in database  How write fire query in JSP for adding records in database
adding mouse listeners to drop target
adding mouse listeners to drop target  import java.awt.*; import java.awt.dnd.DnDConstants; import java.awt.dnd.DragGestureRecognizer; import... with adding mouse listeners to "table" which is drop target, to accept drop
MySQL Affected Rows
MySQL Affected Rows This example illustrates how to show the affected rows... rows affected (0.08 sec)   Here update a table "...; Query OK, 0 rows affected (0.00 sec) Rows matched: 1 Changed: 0
JavaScript Hide Table Rows
JavaScript Hide Table Rows...; In this section, you will learn how to hide table rows using JavaScript... object grabs the id of the table. Then we have determined the length of rows
adding background image - Java Beginners
adding background image  how do i add background image to this code: import javax.swing.*; import java.awt.*; import java.awt.event.*; public class sampleProg extends JFrame { JButton button = new JButton ("Result
adding a method to calculate a students grade
adding a method to calculate a students grade  The Following program which displays a students name, id and mark works fine. But when i tried to add a method to display the grade based on the mark of the student i cant seem
Php Sql Number of Rows
Php Sql Number of Rows  This example illustrates how to count the rows... of rows of the table. To find the number of the rows we use the mysql_num_rows..._rows($res);     print("$number_of_rows rows 
return all rows mysql php
return all rows mysql php  How to find or return results that are not available in another table .. using join method in PHP and MYSql.   SELECT * FROM Declined LEFT JOIN Request ON Declined.RequestID
 

 

 

DMCA.com