0

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

2
Contributors
6
Replies
7
Views
7 Years
Discussion Span
Last Post by jaycastr
0

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 by fxm: n/a

0

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:

<td><input type="button" name="start" value="Start Time" onclick="starttime()"/></td>

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

0

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>
0

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.

Edited by fxm: n/a

0

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.

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.