AspdotnetCodes.com
Search
Articles
Books
Resources
Asp.Net News
Downloads
Free Tech Magazines
Asp.Net Web Hosting
Archives
Softwares
Newsletter
Suggest Us
Link to Us
Feeds Subscription
Articles
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
Hi,

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
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
}

Thanks!

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
Hi,

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="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script>

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';
textbox1.name = 'txtRow0' + iteration;
textbox1.id = 'txtRow0' + iteration;
textbox1.size = 35;
textbox1.value = 'Sample Data for row no. ' + iteration;
cell1.appendChild(textbox1);

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

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

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

 
Sponsored by
The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks - Free 158 Page Preview
Sexy Web Design - Free 71 Page Preview!
Many .NET teams are underperforming, is yours?