I want to convert a table to div tables, but when I created the table in Dreamweaver it just added the <tbody> tag. Does I need it when converting the table to div-table ?
Here is the code of the table
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
As you can see I want a table using divs with
width="100%" border="0" align="left" cellpadding="0" cellspacing="0"
What is the correct way to do that? And is neccesary to set another div for the <tbody> tag ?
HTML
<div class="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
CSS
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.table .tr {
display: table-row;
}
.table .td {
display: table-cell;
vertical-align: middle;
text-align: left;
}
Hope this works for you. :)
Related
The editor field already has HTML text within it.
I want to Clear it using Selenium.
Below is the code of the site.
<div id="EmailText" style="display: none">
<table id="tabbgcol1" cellspacing="0" cellpadding="0" style="padding: 0px; font: inherit; color: inherit;">
<tbody>
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0" align="left" style="color: inherit; font: inherit;">
<tbody>
<tr>
<td id="colcol21">
<p>Hello,</p>
<p>AS would like your feedback!</p>
<p>We thank you for your time and participation.</p>
<p>Sincerely,</p>
<p>Saket</p>
<p>ZASD</p>
<span style="font-size:11px;font-family:Verdana, Arial, san-serif;"></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Is it possible to Edit individual paragraphs here. Or should I clear it. I am not able locate the text field here.
Using this id id="colcol21" results in element not found.
I'm dynamically(on click of radio button) copying the inner html of one row(in a table) to other but after removing some elements.
var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
.replace('<div class="custom-radio" style="margin-top:50px;">',"")
.replace('<label for="shareredio"+e""></label>',"")
.replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
.replace('<label for="sharecheck"+e""></label>',"")
.replace('Share fare',"");
document.getElementById('copyDiv').innerHTML = a;
I don't know enough about javascript but if there is any better way then please help...
This is probably not the best way to do it but I thought I'd at least give you an answer quickly. This is using jQuery to manipulate the DOM.
var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();
var result = $a.html().replace('Share fare', "");
$('#copyDiv').html(result);
something like this?
$(document).ready(function() {
$('.copy').on('change', function(){
if($('.copy:checked').val() == 'yes'){
$('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
$('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
$('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
}
else {
$('.table2').find('.rowContents1').html('');
$('.table2').find('.rowContents2').html('');
$('.table2').find('.rowContents3').html('');
}
});
});
table {
border: 1px solid gray;
}
td, th {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
div{
display: inline-block;
margin-right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
Table1
<table class="table1">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1">This is the Contents of Row 1</td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2">This is the Contents of Row 2</td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3">This is the Contents of Row 3</td>
</tr>
</body>
</table>
</div>
<div>
Table2
<table class="table2">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1"></td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2"></td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3"></td>
</tr>
</body>
</table>
</div>
i used .html() to rewrite the contents inside each td. .find() function just traverses down the element tree and finds the descendants $('.table2').find('.rowContents1') is saying in element of class .table2, find the descendants with class .rowContents1.
hope this helps and is what you're looking for
I have to create a 1 page html website.I have already done it in french language now i am trying to add an option at the top of my website to translate language between french or english.
The idea is to have a table which contains a button of flag of France and england (french and english) in first row (something like this:http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using html and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
see this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have all my html like this (it don't contain code for English table but it will have the table of same html code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?
Write all the divs (and put class on them, like for example : .french ) in both languages and then use jQuery as following :
$(document).ready(function(){
$("#frenchFlag").click(function(){ //When you click on the French flag
$(".french").show(); //Show the divs with the class .french
$(".english").hide(); //Hide the divs with the class .english
});
$("#englishFlag").click(function(){ //Same thing
$(".french").hide();
$(".english").show();
});
});
Obviously you'll hide either the divs with the class .french or the divs with .english at the start of the loading of your page (basically in your
$(document).ready(function() {
//Write here, for example if your website is in French by default :
$(".french").show();
$(".english").hide()
});
You could write your HTML like this:
<div id='english' style='display: none'>
[your complete english HTML]
</div>
<div id='french' style='display: block'>
[your complete french HTML]
</div>
And for your buttons:
<img [...] onClick="document.getElementById('english').style.display=none; document.getElementById('french').style.display=block;">
For the french version. The english switches the display attribute, of course.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<button id="bt1">In English</button>
<button id="bt2">In French</button>
<div>
<div id="one">
<table style="width:50%">
<tr>
<th>Language</th>
<th>Name</th>
<th>Pattern</th>
</tr>
<tr>
<td>English</td>
<td>c#</td>
<td>MVC</td>
</tr>
<tr>
<td>English</td>
<td>Java</td>
<td>J2EE</td>
</tr>
<tr>
<td>English</td>
<td>.Net</td>
<td>MVC4</td>
</tr>
</table>
</div>
<div id="two" style="display:none">
<table style="width:50%">
<tr>
<th>Language</th>
<th>Name</th>
<th>Pattern</th>
</tr>
<tr>
<td>French</td>
<td>PHP</td>
<td>MVC</td>
</tr>
<tr>
<td>French</td>
<td>Java</td>
<td>J2EE</td>
</tr>
<tr>
<td>French</td>
<td>.Net</td>
<td>MVC4</td>
</tr>
</table>
</div>
</div>
<script>
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
document.getElementById('bt1').addEventListener('click',function(e){
swap('one','two');
});
document.getElementById('bt2').addEventListener('click',function(e){
swap('two','one');
});
</script>
</body>
</html>
Instead of button you can replace your image.
<div id="bt1" ><img src="english.png" alt="Smiley face" height="20" width="20"></div>
I am implementing a table with CSS which is changed in each row but one td of table contains another table. I have implemented it like this :
HTML code :
<table width="100%" class="table">
<thead>
<tr>
<th style="width: 11%">Location</th>
<th><div>
<table class="table" style="table-layout: fixed;width: 100%; margin-bottom: 0px;">
<tr>
<th style="width: 12%">Col1</th>
<th style="width: 12%">Col2</th>
<th style="width: 12%">Col3</th>
<th style="width: 11%">Col4</th>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tbody style="overflow-y: auto; max-height: 200px;">
<tr data-ng-repeat="Loc in LocationList">
<td style="width: 11%;">{{Loc.locationName}}</td>
<td><div>
<table class="table" style="table-layout: fixed;width: 100%;margin-bottom: 0px;"">
<tr data-ng-repeat="a in Loc.locations">
<td data-ng-class="(checkEvenOrOdd()) ? 'odd' : 'even'" style="width: 12%;">{{a.subLocName}}</td>
<td data-ng-class="(!evenOrOdd) ? 'odd' : 'even'" style="width: 12%;">{{a.typeName}}</td>
<td data-ng-class="(!evenOrOdd) ? 'odd' : 'even'" style="width: 12%;">
<span style="color: red;" data-ng-show="{{a.unassigned}}">{{a.prfName}}</span>
<span data-ng-show="!{{a.unassigned}}">{{a.prfName}}</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
JS code:
$scope.evenOrOdd = true;
$scope.checkEvenOrOdd = function()
{
if($scope.evenOrOdd==true)
{
$scope.evenOrOdd=false;
return !$scope.evenOrOdd;
}
else
{
$scope.evenOrOdd=true;
return !$scope.evenOrOdd;
}
};
This code gives me correct output but after clicking one any link on the page it gives me this error
Watchers fired in the last 5 iterations: [["(checkEvenOrOdd()) ? 'odd' : 'even';
I searched for this error and tried some code changes but not able to solve it. Please note it is not just to check even or odd row. There is some ordering in rows. Kindly help.
I would instead use ng-class-even/ng-class-odd https://docs.angularjs.org/api/ng/directive/ngClassEven:
<table class="table" style="table-layout: fixed;width: 100%;margin-bottom: 0px;"">
<tr data-ng-repeat="a in Loc.locations">
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">{{a.subLocName}}</td>
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">{{a.typeName}}</td>
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">
<span style="color: red;" data-ng-show="{{a.unassigned}}">{{a.prfName}}</span>
<span data-ng-show="!{{a.unassigned}}">{{a.prfName}}</span>
</td>
</tr>
</table>
Or alternatively it can be done using css but this won't work in IE8:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
I use contenteditable in td
<table style="width:200px">
<tr>
<td contenteditable style="width:100px" id="1">test</td>
<td contenteditable style="width:100px" id="2">test</td>
</tr>
</table>
when I enter more text in the first td, it make the second td become smaller, then table will bigger than 200px that I specified before, how can I prevent that ?
http://jsfiddle.net/8ZNj3/1/
html:
<table>
<tr>
<td contenteditable>this long text won't overflow</td>
<td contenteditable>test</td>
</tr>
</table>
css:
table {
width: 200px;
table-layout: fixed;
}
td {
width: 100px;
white-space: nowrap;
overflow: hidden;
}
Try this:
<table style="max-width:200px;">
<tr>
<td contenteditable="true" style="max-width:100px; word-wrap: break-word;" id="1">test</td>
<td contenteditable="true" style="width:100px;" id="2">test</td>
</tr>
</table>