Hi Frnds..Need ur help here

Question

manish Kishore 0 Newbie Poster

20 Years Ago

Hi All,
I am trying to create html form which looks like Excel Sheet.
I am able to some extent, only thing where I am stuck is how to make the rows dynamic(Once the user click Enter a new row should Enter automatically).

Frnds can U please help me here.

Please help me as it is urgent.

Thanks in advance.
Manish

user-interface web-design

2 Contributors
6 Replies
106 Views
1 Day Discussion Span
Latest Post 20 Years Ago Latest Post by manish Kishore

Dani AI

Generated 10 Months Ago

Short diagnosis and a simple fix for the behavior reported by : when a cloned table row keeps the previous row's entries, the cloning method is copying the form-control state. Common causes are using cloneNode(true) or copying innerHTML (both can carry current values or value attributes), duplicated id attributes on inputs, or browser autofill. was right to warn about intercepting Enter — that key normally submits a form — so the approach should prevent default submission and be clearly signalled in the UI.

Two reliable patterns

Keep a hidden, empty template row in the DOM and clone that when a new row is needed. The template has blank inputs and no IDs, so clones start clean.
If cloning an existing row, immediately clear the form controls on the clone (and remove duplicate IDs). Example clearing logic:

var newRow = existingRow.cloneNode(true);
var controls = newRow.querySelectorAll('input, textarea, select');
for (var i = 0; i < controls.length; i++) {
  var c = controls[i];
  if (c.tagName === 'SELECT') c.selectedIndex = 0;
  else if (c.type === 'checkbox' || c.type === 'radio') c.checked = false;
  else c.value = '';
  if (c.id) c.removeAttribute('id');
}
table.tBodies[0].appendChild(newRow);

Capturing Enter without submitting

Use a keydown handler with preventDefault, and prefer event delegation so newly added rows don’t need per-row bindings:

table.addEventListener('keydown', function(e) {
  if (e.key === 'Enter' || e.keyCode === 13) {
    e.preventDefault(); // stop form submit
    var row = e.target.closest('tr');
    addBlankRowAfter(row); // implement via template or clone+clear
  }
});

Practical tips and cautions

Remove or regenerate duplicated id attributes after cloning.
To avoid browser autofill filling the template, use autocomplete="off" on the form/inputs.
Prefer a visible “Add row” control or document the Enter behavior so users aren’t surprised (echoes ’s UX point).
Use delegation for other event handlers (keypress/validation) so cloned rows inherit behavior without rebinding.

This approach gives a clean blank row every time and avoids accidental form submissions or duplicate element IDs.

All 6 Replies

alpha_foobar 5 Junior Poster

20 Years Ago

Read this previous thread in this forum... then post any questions or difficulties you are having.

http://www.daniweb.com/techtalkforums/showthread.php?t=22923&highlight=dynamic+rows

cheers.

alpha_foobar 5 Junior Poster

20 Years Ago

i'm sorry, I don't see how its different... well thats a lie, I can obviously find a multitude of differences. what I am trying to say is that thread describes adding new elements to an html page.

The only minor difference is that the thread has a button - you want to listen to the enter key event. Which isn't hard (add a keyPress event handler to your page). But I would recommend against this approach - as the enter key has other special meanings in html (like submitting your form if you feel the need). so unless your just interested in the idea of making a page like excell, i'd think about the user and perhaps put buttons on each line.

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.

manish Kishore 0 Newbie Poster · Answer 1 · 2006-04-11T14:27:00+00:00

hi,
I have seen the code but my requirement is totally different.
I am trying to make a form which looks and work like the Excel sheet.
I am stuck at this point...
When a user hit the Enter button a new row should generated(Dynamically).

Thanks in advance

Manish

manish Kishore 0 Newbie Poster · Answer 2 · 2006-04-11T15:44:01+00:00

This is the code....
<html>

<head>
<title>Repository</title>
</head>
<body>

<center><h9>Repository</h9></center>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="1291" id="AutoNumber1" height="63">
<tr>
<td width="30" bgcolor=#94B6FF align="center" height="70">
Si-no</td>
<td width="36" bgcolor=#94B6FF align="center" height="70">

Ticket Number</td>
<td width="54" bgcolor=#94B6FF align="center" height="70">
Description</td>
<td width="37" bgcolor=#94B6FF align="center" height="70">
Priority</td>
<td width="70" bgcolor=#94B6FF align="center" height="70">

Understandings</td>
<td width="37" bgcolor=#94B6FF align="center" height="70">
Planned
Start Date</td>
<td width="30" bgcolor=#94B6FF align="center" height="70">
Actual
 start
Date</td>
<td width="44" bgcolor=#94B6FF align="center" height="70">
RFF Approval
Date</td>
<td width="37" bgcolor=#94B6FF align="center" height="70">
Planned End
Date</td>
<td width="40" bgcolor=#94B6FF align="center" height="70">
Actual End
(Date Delivery Date)</td>
<td width="37" bgcolor=#94B6FF align="center" height="70">
Project
Delayed Days)</td>
<td width="44" bgcolor=#94B6FF align="center" height="70">
Planned Date
for Customer Signoff</td>
<td width="44" bgcolor=#94B6FF align="center" height="70">
Received
Customer Sign-off</td>
<td width="27" bgcolor=#94B6FF align="center" height="70">
Status</td>
<td width="122" bgcolor=#94B6FF align="center" height="70">
Stage
(Local|Staging|Production)

</td>
<td width="45" bgcolor=#94B6FF align="center" height="70">
Assigned
Resources</td>
<td width="37" bgcolor=#94B6FF align="center" height="70">
Planned
Dev 
Efforts</td>
<td width="33" bgcolor=#94B6FF align="center" height="70">
Actual
Dev 
Efforts (Billed
Hours)</td>
<td width="44" bgcolor=#94B6FF align="center" height="70">
Dev
Effort
(Variance Hours)</td>

<td width="45" bgcolor=#94B6FF align="center" height="70">
  % Complete

</td>

<td width="120" bgcolor=#94B6FF align="center" height="70" colspan="5">
Development Testing
 
</td>
<td width="132" bgcolor=#94B6FF align="center" height="70" colspan="5">
     QA
Testing
 
</td>
<td width="120" bgcolor=#94B6FF align="center" height="70" colspan="5">
Customer Acceptance Testing
 
</td>
<td width="120" bgcolor=#94B6FF align="center" height="70" colspan="5">
Comments
 
</td>

</tr>
<tr>
<td width="30" bgcolor=#94B6FF align="center" height="41">

<td wwidth="30" bgcolor=#94B6FF align="center" height="1" width="36"> </td>
<td width="54" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="37" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="70" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="37" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="30" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="44" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="37" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="40" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="37" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="44" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="44" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="27" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="122" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="45" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="37" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="33" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="44" bgcolor=#94B6FF align="center" height="1"> </td>
<td width="45" bgcolor=#94B6FF align="center" height="1"></td>

<td width="31" bgcolor=#94B6FF align="center" height="1">
C
</td>
<td width="31" bgcolor=#94B6FF align="center" height="1">
Total Defect
</td>
<td width="30" bgcolor=#94B6FF align="center" height="1">
Unit WDD
</td>
<td width="31" bgcolor=#94B6FF align="center" height="1">
A
</td>

<td width="31" bgcolor=#94B6FF align="center" height="1">
Total Defect
</td>

<td width="31" bgcolor=#94B6FF align="center" height="1">
Total Defect
</td>

<td width="31" bgcolor=#94B6FF align="center" height="1">
External WDD
</td>
<td width="31" bgcolor=#94B6FF align="center" height="1">

</td>

</tr>
</table>

</body>

</html>

alpha_foobar 5 Junior Poster · Answer 3 · 2006-04-11T16:40:09+00:00

unless you don't mean dynamically add a new row, perhaps you mean just go to the next row?

in which case add a keypress event handler to each end of row textfield... much better UI.

manish Kishore 0 Newbie Poster · Answer 4 · 2006-04-11T20:36:22+00:00

Hi,
I have reused the code which was given in the link.
but there is one more problem,when I am adding a new row ,new row contains the data of the previous row.

I want the new row to be blank..
Please let me know ASAP

Thanks in advance,
Manish

Hi Frnds..Need ur help here

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers