I have created a table in div element in Javascript with some rows and columns
var parentElement = document.getElementById('divExcelData');
var tableElement = document.createElement('table');
tableElement.border = "1";
for (var r = 1; r <= 3; r++) {
var rowElement = document.createElement('tr');
for (var c = 1; c <= 2; c++) {
var colElement = document.createElement('td');
colElement.setAttribute("style", "width:80px; height:20px; border:1px solid Black;");
var divElement = document.createElement('div');
divElement.id = r + '_' + c;
divElement.contentEditable = "true";
divElement.style.width = "100%";
divElement.style.height = "100%";
colElement.appendChild(divElement);
rowElement.appendChild(colElement);
}
parentElement.appendChild(tableElement);
}
but problem is when I debug the page from Internet Explorer(9) developer tools it shows inner html of table element as...
<TABLE border=1>
<TR>\r\n
<TD>\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=1_1 contentEditable=true></DIV>
</TD>\r\n
<TD>\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=1_2 contentEditable=true></DIV></TD>
</TR>
\r\n
<TR>\r\n
<TD>\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=2_1 contentEditable=true></DIV>
</TD>
\r\n
<TD>
\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=2_2 contentEditable=true></DIV>
</TD>
</TR>
\r\n
<TR>
\r\n
<TD>
\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=3_1 contentEditable=true></DIV>
</TD>
\r\n
<TD>
\r\n
<DIV style=\"WIDTH: 100%; HEIGHT: 100%\" id=3_2 contentEditable=true>
</DIV>
</TD>
</TR>
</TABLE>
I don't know why \r\n is added in HTML and also style element contains (\") instead of ("). That's why the page shows nothing. This code works well in Chrome and Firefox.
Related
I'm trying to center a card on the page and center the text within that card. Here is the CSS I've attempted below. And It seems to do nothing. I am trying to use JS for the first time with CSS. Confusion about where I'm messing up, so not entirely sure what part to isolate to share.
sample here: https://rrrhhhhhhhhh.github.io/sentences/
Thank you
CSS
.testclass {
font: 10px courier, courier new;
background: #ffffff;
z-index: 10;
layer-background-color: #ffffff;
}
#test {
position: absolute;
top: 10px;
left:10px;
padding: 0px;
}
#rel {
position: relative;
align: center;
}
html and js
}
function writit(text,id)
{
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = '';
x.innerHTML = text;
}
else if (document.all)
{
x = document.all[id];
x.innerHTML = text;
}
else if (document.layers)
{
x = document.layers[id];
l = (480-(getNumLines(text)*8))/2;
w = (764-(getWidestLine(text)*8))/2;
text2 = '<td id=rel align="center" CLASS="testclass" style="font:12px courier,courier new;padding-left:' + w.toString() + 'px' + ';padding-top:' + l.toString() + 'px' + '">' + text + '</td>';
x.document.open();
x.document.write(text2);
x.document.close();
}
}
function getNumLines(mystr)
{
var a = mystr.split("<br>")
return(a.length);
}
function getWidestLine(mystr)
{
if (mystr.indexOf(" ") != -1)
{
re = / */g;
mystr = mystr.replace(re,"Z");
//alert(mystr);
}
if (mystr.indexOf("<u>") != -1)
{
re = /<u>*/g;
mystr = mystr.replace(re, "");
re = /<\/u>*/g;
mystr = mystr.replace(re, "");
}
if (mystr.indexOf("<br>") != -1)
{
var ss, t;
var lngest;
ss = mystr.split("<br>");
lngest = ss[0].length;
for (t=0; t < ss.length; t++)
{
if (ss[t].length > lngest)
{
lngest = ss[t].length;
}
}
}
else {
lngest = mystr.length;
}
return(lngest);
}
// -->
</script>
<body bgcolor="gainsboro" onload="startup();">
<table bgcolor="white" border height="480px" width="764px" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table nowrap>
<tr>
<td><img width="700px" height="1px" src="./resources/images/w.gif"></td>
<td>
<div class="testclass" id="test"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<form>
<p>
<input type="button" onclick="doBack(); return false" value="Back">
<input type="button" onclick="doNext(); return false" value="Next">
</p>
</form>
</center>
</body>
</html>
Just notice this without js
.testclass {
font: 10px courier,courier new;
background: #ffffff;
z-index: 10;
layer-background-color: #ffffff;
}
#test {position: absolute;
top: 10px;
left:10px;
padding: 0px;
}
#rel {position: relative;
align: center;
}
.center-div{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
<!Doctype html>
<html>
<head>
<title>Robert Grenier - Sentences</title>
</head>
<body>
<div class="center-div">
<table bgcolor="white" border height="480px" width="764px" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table nowrap>
<tr>
<td><img width="700px" height="1px" src="./resources/images/w.gif"></td>
<td>
<div class="testclass" id="test"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<form>
<p>
<input type="button" onclick="doBack(); return false" value="Back">
<input type="button" onclick="doNext(); return false" value="Next">
</p>
</form>
</center>
</div>
</body>
</html>
I've this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testPage</title>
<style>
table td {
width: 50%;
}
</style>
</head>
<body>
<div id="titlebar">
<center>
Select option:
<select onchange="onSelect.call(this, event)">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<script>
function onSelect(event) {
switch (this.options[this.selectedIndex].text) {
case "One":
var td = document.getElementById("one");
td.style.borderColor = "red";
td.style.borderWidth = "5px";
td.style.borderStyle = "solid";
td.style.width = "99%";
var td = document.getElementById("two");
td.style.borderColor = "black";
td.style.borderWidth = "1px";
td.style.borderStyle = "solid";
td.style.width = "100%";
break;
case "Two":
var td = document.getElementById("two");
td.style.borderColor = "red";
td.style.borderWidth = "5px";
td.style.borderStyle = "solid";
td.style.width = "99%";
var td = document.getElementById("one");
td.style.borderColor = "black";
td.style.borderWidth = "1px";
td.style.borderStyle = "solid";
td.style.width = "100%";
break;
}
}
</script>
</center>
</div>
<div id="images">
<table width="100%" height="100%" border=1 cellpadding=1>
<!-- first row -->
<tr id="row1">
<td id="xxx">
<div id="xxx_div" style="width:100%;height:370px"></div>
</td>
<td id="yyy">
<div id="one" style="width:100%;height:370px"></div>
</td>
</tr>
<!-- second row -->
<tr id="row2">
<td id="zzz">
<div id="zzz_div" style="width:100%;height:370px"></div>
</td>
<td id="kkk">
<div id="two" style="width:100%;height:370px"></div>
</td>
</tr>
</table>
</div>
<div id="bottom">
Bottom ...
</div>
</body>
</html>
that works fine, but if I rescale my browser page you can see that scrollbars appears (I know, I'm using absolute values for div height and the problem probably is about this, but it's only to show the problem ... ).
I'd like to obtain the same behaviour at this site
http://tools.geofabrik.de/mc/
where you can see that if you rescale the browser scale, no scrollbars appears and the maps (so the tables and its contents ... ), rescale ...
Suggestions / examples?
This is what you're looking for:
html, body {
min-height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
table {
width: 100vw;
height: 100vh;
}
td {
width: 50%;
height: 50%;
background: red;
}
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Of course, you might adapt your table size if you need to add inputs or text outside.
Just consider always occupying a total 100% of the visible area.
Hi i m using in my project a simple functionality.
i have a table and some data is fetch data in json file .
Data is coming and if i click to name than edit mode is on if i blur than hide the edit mode and show the view mode is fine i have do this .
now i have a update button if i click to this button than only updated data in insert next row how to do this please check to this and help me .
My code is this
var myApp = angular.module('myApp', []);
myApp.controller('myCntrl', function($scope, $http){
$http.get('js/list.json').success(function(data){
$scope.emplyeList = data;
});
$scope.updateSec= function(employe){
alert("Rohit");
}
});
.click{
cursor: pointer;
text-decoration: underline;
}
.normal-table{
width: 50%;
border-collapse: collapse;
}
.normal-table th{
border: solid 2px rgba(0,0,0,0.1);
}
.normal-table td{
border: solid 2px rgba(0,0,0,0.1);
text-align: center;
padding: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">
<body>
<table class="normal-table">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employe in emplyeList">
<td>
<div ng-show="!data" ng-click="data=true" class="click">{{employe.name}}</div>
<div ng-show="data"><input ng-blur="data=false" type="text" ng-model="employe.name" /></div>
</td>
<td>
<div ng-show="!data">{{employe.ID}}</div>
<div ng-show="data"><input type="text" ng-model="employe.ID" /></div>
</td>
<td>
<div ng-show="!data">{{employe.add}}</div>
<div ng-show="data"><input type="text" ng-model="employe.add" /></div>
</td>
</tr>
<tr>
<td colspan="3">
<button ng-click="updateSec(employe)">Update</button>
</td>
</tr>
</tbody>
<tbody>
<tr ng-repeat="updatEm in employe">
<td>{{updatEm.name}}</td>
<td>{{updatEm.ID}}</td>
<td>{{updatEm.add}}</td>
</tr>
</tbody>
</table>
</div>
My Json file is
[
{"name":"Rohit", "ID":"5Rt", "add":"Delhi"},
{"name":"Kiran", "ID":"4Kn", "add":"UP"},
{"name":"Abhay", "ID":"3Ay", "add":"HR"},
{"name":"Rahul", "ID":"2Rl", "add":"UK"}
]
HTML
<tr ng-repeat="employe in emplyeList" ng-click="updateSec(employe)">
</tr>
<tr>
<td colspan="3">
<button ng-click="showData()">Update</button>
</td>
</tr>
<tr ng-if="showEmployee" ng-repeat="employe in modifiedEmplyee">
<td>{{employe.name}}</td>
<td>{{employe.ID}}</td>
<td>{{employe.add}}</td>
</tr>
Script
//Display list
$scope.showEmployee = false;
//Create an array to hold updated employee
$scope.modifiedEmplyee = [];
//Set updated field to identify updated employee
$scope.updateSec = function (employe) {
employe.updated = true;
$scope.showEmployee = false;
}
//Show data and copy modilfied list
$scope.showData = function () {
$scope.showEmployee = true;
$scope.modifiedEmplyee = [];
for(var i = 0; i< $scope.emplyeList.length; i++)
{
var emp = $scope.emplyeList[i];
if(emp.updated && emp.updated == true){
$scope.modifiedEmplyee.push(emp);
}
}
}
DEMO
i have found lots of articles pertaining to auto-resizing rows and columns such as the CSS codes below:
textarea[readonly="readonly"], textarea[readonly] { background-color:white; }
float colWidth = [[[tableView tableColumns] objectAtIndex:1]width];
NSString *content = [[[tempArray objectAtIndex:row] objectForKey:#"tValue"] string];
float textWidth = [content sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[NSFont fontWithName:#"Lucida Grande" size:15],NSFontAttributeName ,nil]].width;
float newHeight = ceil(textWidth/colWidth);
newHeight = (newHeight * 17) + 13;
if(newHeight < 47){
return 47;
}
return newHeight;
table {
width: 700px;
}
and
table tr td {
width: 350px;
height: auto;
}
But nothing seems to work with my code
Here is my table code and I want it to auto-resize based on the data that will be fetch from the database:
$myRes = "<form action='' method='post'>
<fieldset style='width: 10px'>
<legend align='left'><strong>Results</strong></legend>
<p>
<table width='auto' border='1' cellspacing='1' cellpadding='1' align='center'>
<tr>
<th align='center' scope='row'>A</th>
<td><textarea class=readonly name=testA id=testA cols=65 rows=3>" . $result['testA'] . "</textarea></td>
</tr>
<tr>
<th scope='row'>B</th>
<td><textarea class=readonly name=testB id=testB cols=65 rows=3>" . $result['testB'] . "</textarea></td>
</tr>
</table>
</p>
</fieldset>
</form>";
try following :
$("textarea").height( $("textarea")[0].scrollHeight );
or
window.setTimeout( function() {
$("textarea").height( $("textarea")[0].scrollHeight );
}, 1);
Here is the jsfiddle of the below code. http://jsfiddle.net/ux4DD/. What I want is the name Harry Pham to be in one line, so I make the width very small and do white-space:nowrap. It work on Firefox, but not IE. Help please
<table cellpadding="0" cellspacing="0" style="width: 450px;">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:20px;border-top:1px solid gray;white-space: nowrap;"><span class="linkColor">Harry Pham</span>
</td>
<td style="height:15px;background:url('images/line.png') no-repeat;width:28px;" width="35px"></td>
<td style="border-bottom:1px solid gray;" width="auto"></td>
</tr>
</table>
</td>
</tr>
</table>
For IE 6 and 7 you need to wrap your text with a <span> tag and give it a white-space property. Since you already have a <span> tag wrapped around your text and you have a class for it, just add the white-space property to your <span> class .linkColor.
.linkColor{
white-space:nowrap;
}
Check working example at http://jsfiddle.net/ux4DD/1/
Hope this will be helpful:
var buttons = document.getElementsByTagName('button');
for(var j=0; j < buttons.length; j++) {
var button = buttons[j];
var textNode = button;
while(textNode.children[0]) {
textNode = textNode.children[0];
}
var text, words, numSplits;
var spacing = 0;
while(button.scrollWidth !== 0 && button.clientWidth !== 0 &&
button.scrollWidth > button.clientWidth) {
if(!spacing) {
text = textNode.innerHTML;
words = text.split(' ');
numSplits = Math.ceil(button.scrollWidth / button.clientWidth);
spacing = Math.round((words.length)/numSplits);
}
for(var i = spacing; i < words.length; i+=spacing+1) {
words.splice(i , 0, '<br />');
}
textNode.innerHTML = words.join(' ');
spacing--;
words = text.split(' ');
}
}
Ref: Word wrapping for button with specified width in ie7?