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
Backup and Recovery Best Practices for Microsoft SQL Server 2005
The Art & Science of JavaScript - Free 100 Page Preview!
Windows 8: 50 Questions and Answers You Need to Make a Decision (Normally $9.95)