Asp.Net News
Free Tech Magazines
Asp.Net Web Hosting
Suggest Us
Link to Us
Feeds Subscription
Questions & Answers
Tips & Tricks
 Not able to display Strings with White Spaces
Posted by Shivani on  5/25/2010 9:20:00 AM Category: JavaScript
Add to my favorites
Email to friend

I am trying to add a new row dynamically using a javascript function to a html table.
I am trying to populate the value for each text in each row and while doing so,I am able to add the data which has single words but if I have something like Last Name, Middle Name only the first word is being displayed ... Can anyone suggest me what I need to modify in the function to get the whole string separated by white spaces.
Please check the below code snippet .

function addRow(tbl_name) {
var tbody = document.getElementById(tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
// create table cell 1
var td1 = document.createElement("TD")
// var abc=GetInnerText("lsTest");
var abc="Last Name";
var strHtml1 = "<CENTER><input id=\"Text1\" type=\"text\" name=" + getName + " SIZE=\"5\" value=" + abc + " style=\"background-color:#E2E6C8;margin ;\" readonly > </input></CENTER>";
td1.innerHTML = strHtml1.replace(/!count!/g, count);
// create table cell 2
var td2 = document.createElement("TD")
var getValue = GetInnerText("Select1");
var getName = "txtBox" + count;
var strHtml2 = "<CENTER><input id=\"Text1\" type=\"text\" name=" + getName + " SIZE=\"5\" value=" + getValue + " style=\"background-color:#E2E6C8;margin ;\" readonly > </input></CENTER>";
td2.innerHTML = strHtml2.replace(/!count!/g, count);
// create table cell 3
var td3 = document.createElement("TD")
var strHtml3 = "<INPUT TYPE=\"text\" NAME=\"in_name\" value=\"agagag\" SIZE=\"5\" MAXLENGTH=\"5\" STYLE=\"height:24;border: 1 solid;margin ;\" READONLY>";
td3.innerHTML = strHtml3.replace(/!count!/g, count);
// append data to row
// add to count variable
count = parseInt(count) + 1;
// append row to table


Post Your Reply Post New Question

 Viewer's Reply
Add Rows To Html Table Through JavaScript
Answered By Moderator1 on 5/27/2010 9:53:19 PM

I could not get your problem.. But I given you an easy way to add Html Rows through Javascript. Please refer the complete code below.

<html xmlns="">
<head runat="server">
<title>Untitled Page</title>

function fnAddRows()
var table = document.getElementById('Table1');
var RowCnt = table.rows.length;
var iteration = RowCnt;
var row = table.insertRow(RowCnt);

// Cell 1
var cell1 = row.insertCell(0);
var textbox1 = document.createElement('input');
textbox1.type = 'text'; = 'txtRow0' + iteration; = 'txtRow0' + iteration;
textbox1.size = 35;
textbox1.value = 'Sample Data for row no. ' + iteration;

// Cell 2
var cell2 = row.insertCell(0);
var textbox2 = document.createElement('input');
textbox2.type = 'text'; = 'txtRow1' + iteration; = 'txtRow1' + iteration;
textbox2.size = 35;
textbox2.value = 'Sample Data for row no. ' + iteration;

// Cell 3
var cell3 = row.insertCell(0);
var textbox3 = document.createElement('input');
textbox3.type = 'text'; = 'txtRow1' + iteration; = 'txtRow1' + iteration;
textbox3.size = 35;
textbox3.value = 'Sample Data for row no. ' + iteration;

<form id="form1" runat="server">
<input type="button" value="Add Rows" onclick="fnAddRows();" />
<br />
<table border="1" id="Table1" width="75%">
<td width="33%">Cell 1</td>
<td width="33%">Cell 2</td>
<td width="33%">Cell 3</td>
Post Your Reply If you still have problem, post it again under this reply for better response.

Sponsored by
Build Your Own ASP.NET 3.5 Web Site Using C# & VB, 3rd Edition - Free 219 Page Preview!
Programmers Heaven C# School Book - Free 338 Page eBook
Windows 8: 50 Questions and Answers You Need to Make a Decision (Normally $9.95)