Producing Row on a click of a button

Question

jaycastr 0 Light Poster

14 Years Ago

Hello All,
This is my first post on here. I am new to javascript and I have a problem.
how can i
1. Have a button that adds a new row of cells to a table
2. In these cells there are input boxes/check boxes/dropdown list/ radioboxes and textarea.
3. And have the user input assigned to that specific cell ex. "<textarea rows='3' cols='10' name='desciption.$i'></textarea>" (I think that how you do it) So that i can query it to a Database
I hope that was clear
Any help is greatly appreciated
Thank you in Advance

-jaycastr

javascript

2 Contributors
6 Replies
141 Views
1 Week Discussion Span
Latest Post 14 Years Ago Latest Post by jaycastr

fxm 23 Posting Pro

14 Years Ago

Since you mention querying a database, I assume that you have server-side scripting; if so, you should start there (as they all have a way to do what you want).

That aside, here http://msdn.microsoft.com/en-us/library/ms532998(VS.85).aspx is a complete tutorial using only javascript.

Assuming that a table already exists, you don't need much more from there than .insertRow and .insertCell . You can generate the widgets by assigning to .innerHTML , but - depending on what is already in the table - you may be able to save yourself a lot of work by using the .cloneNode method.

And of course you will need an onclick= action on the button(s).

Edited 14 Years Ago by fxm because: n/a

fxm 23 Posting Pro

14 Years Ago

but i cant get the starttime() function to replace the button?

No button is needed

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title>
      Add/Remove dynamic rows in HTML table
    </title>
    <script language="javascript" type="text/javascript">
function timeME(that) {
    that.value = new Date()
}
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[1].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;
        }
    }
}
function deleteRow(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        for (var i = 0; i < rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if (null != chkbox && true == chkbox.checked) {
                if (rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
    } catch (e) {
        alert(e);
    }
}    </script>
  </head>
  <body>
    <form>
      <input type="button" value="Add Row" onclick=
      "addRow('dataTable')"> <input type="button" value=
      "Delete Row" onclick="deleteRow('dataTable')">
    </form>
    <form method="post" action="predeploymentprocess.php">
      <table id="dataTable" width="350px" border="1">
        <tr>
          <th></th>
          <th>
            Implementor
          </th>
          <th>
            Lead
          </th>
          <th>
            Steps / Tasks
          </th>
          <th>
            Start Time
          </th>
          <th>
            Finish Time
          </th>
          <th>
            Duration
          </th>
          <th>
            Status
          </th>
        </tr>
        <tr>
          <td>
            <input type="checkbox" name="chk[]">
          </td>
          <td>
            <input type="text" name="imp[]">
          </td>
          <td>
            <input type="text" name="lead[]">
          </td>
          <td>
            <input type="text" name="step[]">
          </td>
          <td>
            <input onclick="timeME(this)" type="text" name="start[]">
          </td>
          <td>
            <input type="text" name="finish[]">
          </td>
          <td>
            <input type="text" name="dur[]">
          </td>
          <td>
            <select name="status[]">
              <option value="">
                Status?
              </option>
              <option value="incomplete">
                Incomplete
              </option>
              <option value="complete">
                Complete
              </option>
            </select>
          </td>
        </tr>
      </table><input type="hidden" name="id" value=
      <br>
      <input type="submit" value="Enter Data">
    </form>
  </body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jaycastr 0 Light Poster · Answer 1 · 2010-07-13T21:56:43+00:00

Thanks fxm. This is what I got now and it works fine

<?php
$id=$_POST['id'];
$deployment=$_POST['id'];


if(!isset($id))
{
echo "no id set";
}
echo "ID = $id<br><br>";

?>
<html>
<head>
    <title> Add/Remove dynamic rows in HTML table </title>
    <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[1].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;
				}
			}
        } 
			
           

 

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

             for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
            }

            }catch(e) {
                alert(e);
            }
        }
    </script>
</head>
<body>
    <input type="button" value="Add Row" onclick="addRow('dataTable')" />
    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
  <form method="post" action="predeploymentprocess.php">
  <table id="dataTable" width="350px" border="1">
        <tr>
            <th></th>
            <th>Implementor</th>
            <th>Lead</th>
            <th>Steps / Tasks</th>
            <th>Start Time</th>
            <th>Finish Time</th>
            <th>Duration</th>
            <th>Status</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk[]"/></td>
            <td><input type="text" name="imp[]"/></td>
            <td><input type="text" name="lead[]"/></td>
            <td><input type="text" name="step[]"/></td>
            <td><input type="text" name="start[]"/></td>
            <td><input type="text" name="finish[]"/></td>
            <td><input type="text" name="dur[]"/></td>
            <td>
                <select name="status[]">
                    <option value="">Status?</option>
                    <option value="incomplete">Incomplete</option>
                    <option value="complete">Complete</option>
                </select>
            </td>
        </tr>
    </table>
	<input type="hidden" name="id" value="<?php echo $id?>"><br />
	<input type="submit" value="Enter Data">
	</form>
</body>
</html>

but now i want to place buttons where start and finsh times are located. and when you press the button it is replaced by text which states the date and time.

some thing like this:

but i cant get the starttime() function to replace the button?
any clues?

fxm 23 Posting Pro · Answer 2 · 2010-07-15T06:49:20+00:00

it works fine

My version of your code was formatted in such a way that it breaks non-IE browsers.
For your code to work in all browsers there must be no whitespace around the checkbox.

<td><input type="checkbox" name="chk[]"></td>

(exactly as you originally coded it).

Sorry for the confusion.

BTW: using the name of a method as the name of a function [deleteRow] is not a Good Idea.

fxm 23 Posting Pro · Answer 3 · 2010-07-15T15:00:23+00:00

There appears to be a problem with function deleteRow() .

if(rowCount <= 1) {
    alert("Cannot delete all the rows.");
    break;

That test is evidently meant to ensure that there will always be at least one 'detail' row in the table; it doesn't.

jaycastr 0 Light Poster · Answer 4 · 2010-07-20T21:35:58+00:00

Thanks Alot fxm! Your the man. Ill worry about the delete code late lol.