add/remove new row to a table

Question

dschuett -1 Junior Poster

13 Years Ago

I am still VERY new to JavaScript, so I will do the best at explaining what I am trying to do here...

I have a database table where I store a bunch of invoices. I am now trying to make a front end to run queries. I don't know how to make it so i can keep adding AND/OR statements to my query as need be. Also, I need a way to eliminate the FIRST AND/OR drop down list because obviously your first query statement will not start with an AND or OR.

Here is my basic html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invoice Query</title>

</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
<table  align="center" border="0" id="qry_table">
        <tr>
        <td><select name="andor"><option value="" selected></option>
                <option value="AND">AND</option>
                <option value="OR">OR</option>
            </select>
        </td>
        <td><select name="column"><option value="" selected></option>
                <option value="inv_num">Invoice Number</option>
                <option value="inv_date">Invoice Date</option>
                <option value="vendor">Vendor</option>
                <option value="purpose">Purpose</option>
                <option value="amount">Amount</option>
            </select>
        </td>
        <td><select name="what"><option value="" selected></option>
                <option value="=">=</option>
                <option value=">">></option>
                <option value="<"><</option>
                <option value=">=">>=</option>
                <option value="<="><=</option>
                <option value="LIKE">LIKE</option>
            </select>
        </td>
                <td><input type="text" name="qry_term" /></td>
        </tr>
        <tr>
                <td colspan="4"><input type="submit" value="Submit Query" name="submit" /></td>
        </tr>
</table>
</form>
</body>
</html>

I'm just not good enough with javascript to know how to add/remove rows if needed, but i am very willing and still trying to learn. Any help is much appreciated!

javascript

2 Contributors
3 Replies
164 Views
18 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by dschuett

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.

robin_dW 0 Newbie Poster · Answer 1 · 2010-12-21T16:58:43+00:00

actually ... i used adding / removing rows with In-Line Add functionality on Table...
by drawing new Empty Row ...and remove the row by pressing cancel.

in HTML Part ..

<table name="table1" id="myTable">

</table>

Java Script code in the Head tag :

function insRow()
{
 var tabl = document.getElementById('MyTable');
 var e=tabl.insertRow(0);
 var i=tabl.insertRow(1);
 var x=tabl.insertRow(2);
 var y=x.insertCell(0);
 var z=x.insertCell(1);
 var a=x.insertCell(2);
 var b=x.insertCell(3);
 var c=x.insertCell(4);
 var d=x.insertCell(5);

 var caption= e.insertCell(0);
 caption.innerHTML = 'New Topic';

 var id= i.insertCell(0);
 var titl= i.insertCell(1);
 var sd= i.insertCell(2);
 var ed= i.insertCell(3);
 var em= i.insertCell(4);
 var dl =i.insertCell(5);

 id.innerHTML ='Topic id';
 titl.innerHTML = 'Topic title';
 sd.innerHTML = 'Start Date';
 ed.innerHTML ='End Date';
 em.innerHTML ='Email';
 dl.innerHTML = 'Data List';
 
 
y.className='tableCell';
z.className='tableCell';
a.className='tableCell';
b.className='tableCell';
c.className='tableCell';
d.className='tableCell';
 y.innerHTML='<input type="text" name="id"  readonly="readonly" size="7" />';
 z.innerHTML='<input type="text" name="title"  />';
 a.innerHTML='<input type="text" name="sdate" />';
 b.innerHTML='<input type="text" name="edate"/>';
 c.innerHTML='<input type="text" name="email" />';
 d.innerHTML='<input type="text" name="dataList" />';
 document.myForm.Add.disabled = true;
}
 // to remove all rows .....

function removeEelement()
{
   TRY {
               VAR table = document.getElementById('myTable');
               VAR rowCount = table.rows.length;
 
               FOR(VAR i=0; i<rowCount; i++) {
                    VAR row = table.rows[i];
               }
		}
			   CATCH(e) {
                    ALERT(e);
               }
}

dschuett -1 Junior Poster · Answer 2 · 2010-12-21T19:44:08+00:00

I have tried your code as shown below, but the page is just a white blank page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invoice Query</title>

<script language="javascript" type="text/javascript">
function insRow()
{
 var tabl = document.getElementById('MyTable');
 var e=tabl.insertRow(0);
 var i=tabl.insertRow(1);
 var x=tabl.insertRow(2);
 var y=x.insertCell(0);
 var z=x.insertCell(1);
 var a=x.insertCell(2);
 var b=x.insertCell(3);
 var c=x.insertCell(4);
 var d=x.insertCell(5);

 var caption= e.insertCell(0);
 caption.innerHTML = 'New Topic';

 var id= i.insertCell(0);
 var titl= i.insertCell(1);
 var sd= i.insertCell(2);
 var ed= i.insertCell(3);
 var em= i.insertCell(4);
 var dl =i.insertCell(5);

 id.innerHTML ='Topic id';
 titl.innerHTML = 'Topic title';
 sd.innerHTML = 'Start Date';
 ed.innerHTML ='End Date';
 em.innerHTML ='Email';
 dl.innerHTML = 'Data List';


y.className='tableCell';
z.className='tableCell';
a.className='tableCell';
b.className='tableCell';
c.className='tableCell';
d.className='tableCell';
 y.innerHTML='<input type="text" name="id"  readonly="readonly" size="7" />';
 z.innerHTML='<input type="text" name="title"  />';
 a.innerHTML='<input type="text" name="sdate" />';
 b.innerHTML='<input type="text" name="edate"/>';
 c.innerHTML='<input type="text" name="email" />';
 d.innerHTML='<input type="text" name="dataList" />';
 document.myForm.Add.disabled = true;
}
 // to remove all rows .....

function removeEelement()
{
   TRY {
               VAR table = document.getElementById('myTable');
               VAR rowCount = table.rows.length;

               FOR(VAR i=0; i<rowCount; i++) {
                    VAR row = table.rows[i];
               }
                }
                           CATCH(e) {
                    ALERT(e);
               }
}
</script>
</head>
<body>
<table name="table1" id="myTable">

</table>
</body>
</html>

dschuett -1 Junior Poster · Answer 3 · 2010-12-21T19:47:40+00:00

Here is my code with a comment on the row I need to be able to add/remove as many times as needed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invoice Query</title>

</head>
<body>
<form method="post" action="" enctype="multipart/form-data">
<div style="width:500px; margin:0 auto;">
<table border="0" id="qry_table">
        <tr>
        <td></td>
        <td><select name="column"><option value="" selected></option>
                <option value="inv_num">Invoice Number</option>
                <option value="inv_date">Invoice Date</option>
                <option value="vendor">Vendor</option>
                <option value="purpose">Purpose</option>
                <option value="amount">Amount</option>
            </select>
        </td>
        <td><select name="what"><option value="" selected></option>
                <option value="=">=</option>
                <option value=">">></option>
                <option value="<"><</option>
                <option value=">=">>=</option>
                <option value="<="><=</option>
                <option value="LIKE">LIKE</option>
            </select>
        </td>
                <td><input type="text" name="qry_term" /></td>
        </tr>
        <!--DYNAMIC ROW I NEED TO ADD/REMOVE  WHEN I NEED-->
        <tr>
        <td><select name="andor"><option value="" selected></option>
                <option value="AND">AND</option>
                <option value="OR">OR</option>
            </select>
        </td>
        <td><select name="column"><option value="" selected></option>
                <option value="inv_num">Invoice Number</option>
                <option value="inv_date">Invoice Date</option>
                <option value="vendor">Vendor</option>
                <option value="purpose">Purpose</option>
                <option value="amount">Amount</option>
            </select>
        </td>
        <td><select name="what"><option value="" selected></option>
                <option value="=">=</option>
                <option value=">">></option>
                <option value="<"><</option>
                <option value=">=">>=</option>
                <option value="<="><=</option>
                <option value="LIKE">LIKE</option>
            </select>
        </td>
                <td><input type="text" name="qry_term" /></td>
        </tr>
        <!--END OF DYNAMIC ROW-->

        <tr>
                <td colspan="4"><input type="submit" value="Submit Query" name="submit" /></td>
        </tr>
</table>
</div>
</form>
</body>
</html>