[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

dynamic TEXTBOX manipulation

Posted on 2006-05-14
2
Medium Priority
?
317 Views
Last Modified: 2010-04-17
=================
<SCRIPT LANGUAGE="JavaScript">
// i=1;
function addRow(id)
{
      
      var rows=document.getElementsByTagName("TR" );

      var count = document.myForm.theValue.value;
      var i;

            
      //alert(rows.length);

       var total = (rows.length) + (count);

       alert(rows.length);


      for(var i=1; i<=count; i++)
      {
            var col1 = "<input type='text' id='email"+i+"' name='email"+i+"' size='30' maxlength='255'>";
             var col2 = "<input type='text' id='name"+i+"' name='name"+i+"' size='30' maxlength='255'>";
             var col3 = "<input type='button' name='remove' value='Remove' onClick='remove(this)'>";
             var tbody = document.getElementById(id).getElementsByTagName("TBODY" )[0];
             var row = document.createElement("TR" )
                                                   
             var td1 = document.createElement("TD" )
               td1.appendChild(document.createElement(col1))
               
               var td2 = document.createElement("TD" )
               td2.appendChild (document.createElement(col2))

               var td3 = document.createElement("TD" )

               td3.appendChild (document.createElement(col3))


               //i=i+1;
               row.appendChild(td1);
               row.appendChild(td2);
               row.appendChild(td3);
               tbody.appendChild(row);
      }
      

}

function remove(r)
{
alert(r.length);
 // document.getElementById('myTable').deleteRow(rowIndex)

// var d = document.getElementById('myDiv');
//      var olddiv = document.getElementById(divNum);
//      d.removeChild(olddiv);

}

function save()
{


     var rows=document.getElementsByTagName("TR" );
     alert(rows.length-1)
   
          for(j=1;j<=rows.length;j++)
              {
                    if(document.getElementById("email"+j))
                              {
                                    if((document.getElementById("email"+j).value) == "")
                                    {
                                          alert("makesh");
                                          document.getElementById("email"+j).focus();
                                          return false;
                                    }
                    }
          }



}
</script>
<html>
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body onload="addRow('myTable')">
<form name=myForm>
<table id="myTable" cellspacing="0" border="1">
  <tbody>
    <tr>
      <td>row1_column1</td><td>row2_column2</td><td align="center">row3_column3</td>
    </tr>
  </tbody>
</table>
<input type=text value="1" name=theValue >
<input type='button' name='Add' value='Add Row' onClick="javascript:addRow('myTable')">
<input type='button' name='Save' value='Save' onClick='save()'>
</body>
</html>
====================

In the above code Remove Button functionality is not working. Please  help me.
0
Comment
Question by:ven_ki
2 Comments
 
LVL 7

Expert Comment

by:Clever_Bob
ID: 16679959
At the risk of sounding stupid, the function is currently commented out.

For the code to run, you will need to remove the '//' before each line of code.

Perhaps you added the comments whilst trying to fix the problem?
0
 

Accepted Solution

by:
jkjainu earned 150 total points
ID: 16681685
Here is modified Code it is working fine. I have tested.

<SCRIPT LANGUAGE="JavaScript">
<!--
function addRow(id)
{
     var rows=document.getElementsByTagName("TR" );
     var count = document.myForm.theValue.value;
     var i;
     var total = (rows.length) + (count);
     for(var i=1; i<=count; i++)
     {
              var col1 = "<input type='text' id='email"+i+"' name='email"+i+"' size='30' maxlength='255'>";
              var col2 = "<input type='text' id='name"+i+"' name='name"+i+"' size='30' maxlength='255'>";
               var col3 = "<input type='button' name='remove"+i+"' id='"+i+"' value='Remove' onClick='removeRow(this)'>";
               var tbody = document.getElementById(id).getElementsByTagName("TBODY" )[0];
               var row = document.createElement("TR" )
          var td1 = document.createElement("TD" )
          td1.appendChild(document.createElement(col1))
          var td2 = document.createElement("TD" )
          td2.appendChild (document.createElement(col2))
          var td3 = document.createElement("TD" )
          td3.appendChild (document.createElement(col3))
          row.appendChild(td1);
          row.appendChild(td2);
          row.appendChild(td3);
          tbody.appendChild(row);
     }
}

function removeRow(rowRef)
{
      // Jainendra Kumar jkjainu@rediffmail.com
      var deleteId= rowRef.id;
      var tbody = document.getElementById('myTable').getElementsByTagName("TBODY")[0];
    tbody.deleteRow(deleteId++);
}

function save()
{
       var rows=document.getElementsByTagName("TR" );
        for(j=1;j<=rows.length;j++)
      {
          if(document.getElementById("email"+j))
             {
                if((document.getElementById("email"+j).value) == "")
                {
                     alert("makesh");
                     document.getElementById("email"+j).focus();
                     return false;
                }
           }
    }
}
-->
</script>
<html>
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body onload="addRow('myTable')">
<form name=myForm>
<table id="myTable" cellspacing="0" border="1">
  <tbody>
    <tr>
      <td>row1_column1</td><td>row2_column2</td><td align="center">row3_column3</td>
    </tr>
  </tbody>
</table>
<input type=text value="1" name=theValue >
<input type='button' name='Add' value='Add Row' onClick="javascript:addRow('myTable')">
<input type='button' name='Save' value='Save' onClick='save()'>
</body>
</html>
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you’re thinking to yourself “That description sounds a lot like two people doing the work that one could accomplish,” you’re not alone.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Six Sigma Control Plans
Introduction to Processes

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question