We help IT Professionals succeed at work.

insert some row to a table ?

jbas
jbas asked
on
551 Views
Last Modified: 2011-10-03
hi ,experts,this is my code,how can i get my want?
thanks!
<html>
<SCRIPT LANGUAGE="JavaScript">
<!--
      function doadd(){
        var insertstr;
        for(var i=0;i<3;i++){
        insertstr="<tr><td>"+i+"</td><td>a"+i+"</td></tr>";
        insertstr+="<tr><td>"+i+"</td><td>b"+i+"</td></tr>";
            //i want insert insertstr before "lastrow",how can i do it?
        }
}
//-->
</SCRIPT>
<body>
<table id="table1">
  <tr>
    <td>id</td>
   <td>name</td>
  </tr>
  //i want insert this "<tr><td>1</td><td>a1</td></tr><tr><td>1</td><td>b1</td></tr><tr><td>2</td><td>a2</td></tr><tr><td>2</td><td>b2</td></tr>
<tr>
  <td colspan="2" id="lastrow">this is last row.</td>
</tr>
</table>
<input type="button" value="insertrow" onclick="doadd();">


</body>
</html>
Comment
Watch Question

ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
Here you go:

<html>
<head>
<title>Zvonko &#42;</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function doadd(){
  var lastRow = document.getElementById("lastrow");
  for(var i=1;i<3;i++){
    addRow(lastRow, i,'a');
    addRow(lastRow, i,'b');
  }
}
function addRow(refRow, rowNum, cellPref){
  var theRow = document.createElement("tr");
  var theCell1 = document.createElement("td");
  theCell1.innerHTML = rowNum;
  theRow.appendChild(theCell1);
  var theCell2 = document.createElement("td");
  theCell2.innerHTML = cellPref+rowNum;
  theRow.appendChild(theCell2);
  refRow.parentNode.insertBefore(theRow, refRow);
}
//-->
</SCRIPT>
</head>
<body>
<table id="table1">
  <tr>
   <td>id</td>
   <td>name</td>
  </tr>
  <tr id="lastrow">
    <td colspan="2" >this is last row.</td>
  </tr>
</table>
<input type="button" value="insertrow" onclick="doadd();">
</body>
</html>



Author

Commented:
hi,Zvonko expert
thanks for your code,but i want insert some tr data in 1 times,because i will insert big tr data,so when do your code ,it's not fast,i want innerHTML all data in one times ,so the speed can fast.
please help me again,thanks!
You really should ask that as part of your question then... he gave you a solution that will do what you asked very nicely.

You can't add rows to that same table, without manipulating the DOM, which, if you're doing a large number of rows, well... it's gonna take a while.

If you want to insert a large chunk of HTML, you can do it like this, but you can't really do it over and over, you get one shot this way.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Steve B</title>

<SCRIPT LANGUAGE="JavaScript">
<!--
function doadd(){
    document.getElementById("bigstuffgoeshere").innerHTML = "<table><tr><td>1</td><td>a1</td></tr><tr><td>1</td><td>b1</td></tr><tr><td>2</td><td>a2</td></tr><tr><td>2</td><td>b2</td></tr></table>";
}
//-->
</SCRIPT>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<table id="table1">
  <tr>
   <td>id</td>
   <td>name</td>
  </tr>
  <tr>
    <td colspan="2">
        <div id="bigstuffgoeshere"></div>
    </td>
  </tr>
  <tr id="lastrow">
    <td colspan="2" >this is last row.</td>
  </tr>
</table>
<input type="button" value="insertrow" onclick="doadd();">
   
    </div>
    </form>
</body>
</html>
Systems architect
CERTIFIED EXPERT
Top Expert 2006
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Zvonko experts
 Thank you very much,your code can run well and so fast .

ps:i will not ask again and again,because your code is so beautiful,and i know ee is the best.

Best Regard!
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
Oh, sorry! Thank you that you proved to me that I was wrong.
And thanks for the points and grading, and for the feedback :)
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.