Add and Delete Rows from a html table by user input from text box using only javascript

Question

I am trying to make a program using HTML and java-script a program in which user can add content and delete from HTML table what ever row he wants to delete I made it but only one cell is edited by text box and other are not getting the values of there text box please do some help to complete my task as it'll be very appreciated.

My code is:

<!Doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

Javascript maybe this my javascript code is not correct written please get any solution for my task

 <script type="text/javascript">

function delrow0()
{
document.getElementById("myTable").deleteRow(0);
}

function displayResult()
{
var table=document.getElementById("myTable");
var row=table.insertRow(0);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=document.getElementById('txtname').value;
cell2.innerHTML=document.getElementById('txtauthor').value;
cell3.innerHTML=document.getElementById('txtcontent').value;

}

</script>
</head>
<body>

HTML

<table id="myTable" border="1">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
     <td>cell 3</td>
  </tr>
  <tr>
    <td>cell 4</td>
    <td>cell 5</td>
      <td>cell 6</td>
  </tr>
</table>
<br>
<button type="button" onClick="displayResult()">Insert new row</button>
<button type="button" onClick="delrow0s()">delete</button>

<form name="create">
Name:<input type="text" id="txtname" /><br/>
Author<input type="text" name="txtauthor" /><br/>
CDate:<input type="text" name="txtcdate" /><br/>
CDate:<input type="text" name="txtcontent" style="height:80px; " />
</form>

</body>
</html>

Fiddle here

your onclick function, called an invalid function name. Should not delrow0s() but delrow0 — Allen Chak
– Allen Chak, Commented Oct 4, 2013 at 12:04
i have no idea about jquery. there should be any way to do that using java script :/ — Syed Ali Ahmed
– Syed Ali Ahmed, Commented Oct 4, 2013 at 12:06
Is this the same question as you're trying to have answered? — Amber
– Amber, Commented Oct 4, 2013 at 12:06
@Amber when i click on insert row button one cell is edited by text box and other cells remain empty.. this is the problem i want solution for.. — Syed Ali Ahmed
– Syed Ali Ahmed, Commented Oct 4, 2013 at 12:22

Andrei C · Accepted Answer · 2013-10-04 12:19:12Z

3

your code is fine, just add id attributes to all the inputs and it should run

Name:<input type="text" id="txtname" /><br/>
Author<input type="text" id="txtauthor" name="txtauthor" /><br/>
Date:<input type="text" id="txtcdate" name="txtcdate" /><br/>
Content:<input type="text" id="txtcontent" name="txtcontent" style="height:80px; " />

you should give jQuery a try though, it makes things alot simpler to handle

answered Oct 4, 2013 at 12:19

Andrei C

81211 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add and Delete Rows from a html table by user input from text box using only javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related