I've started jQuery, html and css recently and I do not really understand everything. As the work deals with all of these things, I don't know where my problem comes from.
I want to generate a html array with js (data will come (later) from a server). This array might be "dynamic" (automatic filling, updating, etc.) and nice to see (hence css).
I do have something "good" right now. The only thing is I do have a "hidden" column and I can't get rid of it.
var data = ["City 1", "City 2", "City 3"]; //headers
var data1= [["New York", 123, "Seattle"],
["Paris", "Milan", "Rome"],
["Pittsburg", "Wichita", "Boise"]];
var cityTable;
//Init and creation of the header
$(document).ready(function() {
cityTable = makeTable($("#test"), data);
appendTableColumn(cityTable, ["Calgary", "Ottawa", "Yellowknife"]);
});
// Add a line thanks to the button
$(function(){
$('#button').click(
function(e){
appendTableColumn(cityTable, ["Calgary", "Ottawa", "Yellowknife"]);
}
)
}
)
//Add a line method
function appendTableColumn(table, rowData) {
var lastRow = $("<tr class=\'row\'/>").appendTo(table.find('thead:last'));
$.each(rowData, function(colIndex, c) {
console.log(c);
lastRow.append($('<td id="cell" class=\'cell\'/>').text(c));
});
return lastRow;
}
//Creation of the table
function makeTable(container, data) {
var table = $("<table/>");
var row = $("<thead>");
row.append($("<tr class=\'row\'/>"));
$.each(data, function(rowIndex, r) {
row.append($("<th>").text(r));
row.append($("</th>"));
});
table.append(row);
return container.append(table);
}
tbody{
display: : block;
padding:20px;
max-width:800px;
margin:auto auto;
font-family:sans;
overflow-y: scroll;
}
table{
}
th {
background:#666;
color:#fff;
padding-left: 5px;
}
td {
padding:5px;
}
input {
height: 24px;
font-size: 18px;
padding:2px;
border:0;
}
body {
font: normal medium/1.4 sans-serif;
}
.cell:hover{
background-color:#FF7368;
}
.row:hover{
background-color:#E8CAB2;
}
.row:hover{
background-color:#E8CAB2;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Editable Table</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js'></script>
<link rel="stylesheet" href="in0.css">
<link href="metro-icons.css" rel="stylesheet">
<script src="in0.js"></script>
</head>
<body>
<button id='button' type="button" >Click Me!</button>
<input type="search" id="search" placeholder="Filter by Title">
<table id="test"></table>
</body>
</html>
Ok, I don t really know why it s working but here what I changed and some words about.
function appendTableColumn(table, rowData) {
var lastRow = $("<tr class=\'row\'>").appendTo(table.find('tbody:last'));
$.each(rowData, function(colIndex, c) {
console.log(c);
lastRow.append($('<td id="cell" class=\'cell\'/>').text(c));
});
return lastRow;
}
function makeTable(container, data) {
var table = $("<table/>");
var row = $("<thead class=\'row\'>");
$.each(data, function(rowIndex, r) {
row.append($("<th >").text(r));
row.append($("</th>"));
});
table.append(row);
var row1 = $("<tbody >");
table.append(row1);
return container.append(table);
}
The problem was to get ride of this "blanc". Hence I searched a way to add "class=\'row\'" to the head (That way it sovles the thing). Hence I created a tbdy part after my table decleration and closed the initial function.
In appendTable, I start from tbody and can file the array with th right css.
I can not say why it s working but the fact is it s good.
Thanks.
Related
The code below highlights a row in a table when the mouse cursor is over a map marker.
This works, but not for all map markers, although there are values in the log.
I've tried using the trim() function on marker.on, but that's clearly not the problem. What could be the problem?
now the selection is like this
AAA no
BBB Yes
CCC no
DDD Yes
FFF-no
Mapscript
<script>
function createmaprker(dataArray) {
var map = L.map('viewmap').setView([51.56, -0.12], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
for (var i = 0; i < dataArray.length; i++) {
var marker = L.marker([dataArray[i][5], dataArray[i][6]]).addTo(map);
marker.bindPopup("Book: " + dataArray[i][2] + "<br>" + "Pages: " + dataArray[i][3]);
marker.on("mouseover", function(e) {
var popup = e.target.getPopup();
var content = popup.getContent();
var tr = $("#data-table").find("td").filter(function() {
return $(this).text() == content.split("<br>")[0].split(": ")[1];
}).closest("tr");
tr.addClass("highlight");
});
marker.on("mouseout", function(e) {
var popup = e.target.getPopup();
var content = popup.getContent();
var tr = $("#data-table").find("td").filter(function() {
return $(this).text() == content.split("<br>")[0].split(": ")[1];
}).closest("tr");
tr.removeClass("highlight");
});
}
}
</script>
code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
function getData() {
var values=[['111', '1111', 'AAA', '752', 'Hardcover', '51.55', '-0.11'], ['222', '5555', 'BBB',' 1040', 'Hardcover', '51.55', '-0.10'], ['333', '777','CCC', '846', 'Hardcover', '51.565', '-0.11'], ['444', '888', 'DDD','258','Paperback', '51.56', '-0.12'], ['555', '555',' FFF',' 789','Hardcover', '51.55', '-0.13']]
return values;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
Scriptdata
<script>
google.script.run.withSuccessHandler(showData).getData();
function showData(dataArray){
console.log(dataArray);
createmaprker(dataArray);
$(document).ready(function(){
$('#data-table').DataTable({
data: dataArray,
columns: [
{"title":"Rating"},
{"title":"Reviews"},
{"title":"Book"},
{"title":"Pages"},
{"title":"Type"},
{"title":"Longitude"},
{"title":"Latitude"},
]
});
});
}
</script>
index
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<?!= include('Scriptdata'); ?>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
body {
margin: 0;
padding: 0;
}
#viewmap {
width: 60%;
height: 60vh;
left: 0%;
margin: auto;
}
#text {
font-family: Georgia, 'Times New Roman', Times, serif;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<br>
<div class="row">
<table id="data-table" class="table table-striped table-sm table-hover table-bordered">
</table>
</div>
</div>
<div id="viewmap"></div>
<?!= include('Mapscript'); ?>
</body>
</html>
The problem is that the DataTables zebra-striping style is interfering with your attempts to highlight the rows with dark grey stripes.
One fix for this is to remove table-striped from your HTML table definition.
If you want to keep your zebra striping, you will need to add !important to your highlighting style:
.highlight {
background-color: yellow !important;
}
You can see an example of this in the official DataTables documentation: Highlighting rows and columns.
Click on the "CSS" tab on that page to see the style example they are using.
There is also a small typo in the data set here: ' FFF' - note that extra space before the first F.
i'm facing very unexpected problem,before this i can't expect that such type of problem also occurs...i wrote word limiter code of text box in single page ,it working 100% well ,word limiter work and also remaining words are displayed by label named"remaining6"...when i paste same code in child page of master then word limiter work but remaining word are not displayed:
<input type="text" id="TextBox5" placeholder="latest" runat="server" onkeyup="countChar(this)" />
<h5 >Characters Left <span id="remaining6">20</span></h5>
<script type="text/javascript" >
function countChar(val) {
var len = val.value.length;
if (len >= 10) {
val.value = val.value.substring(0, 10);
}
else
{
$('.numbersofChart').text(10 - len);
alert("before");
var textEntered = document.getElementById('TextBox5').value;
alert("after");
var msg = document.getElementById('remaining6');
var counter = (10 - (textEntered.length));
msg.textContent = counter;
}
};
</script>
when i debug this code by alert then alert("before") is display and alert("after") is not display.it means error in the following line:
var textEntered = document.getElementById('TextBox5').value;
i don't know why code not execute from this line ...remember when i run same code in single page(without master) then working well...the problem occurs when paste the code in child page of master....i include liberaries in child page properly....how i can solve this problem?
Here is a word limit example:
//<![CDATA[
/* js/external.js */
var doc, bod, dE, I, wordLimit; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body; dE = doc.documentElement;
I = function(id){
return doc.getElementById(id);
}
wordLimit = function(context, remainElement, limit){
var s = context.value.split(/[ ]+/), max = limit || 20;
var n = max-s.length;
if(n < 1)n = 0;
remainElement.innerHTML = n;
if(n === 0){
context.value = s.splice(0, max).join(' ');
}
}
var remain = I('remain');
I('textBox').onkeyup = function(){
wordLimit(this, remain);
}
}); // end load
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
#content{
padding:7px 5px;
}
#textBox{
width:100%; height:38px; background:#fff; color:#000; font:22px Tahoma, Geneva, sans-serif; padding:5px;
}
h5{
text-align:center;
}
h5>span{
color:#a00;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Word Limiter</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div id='content'>
<input id='textBox' type='text' />
<h5>Words Left <span id='remain'>20</span></h5>
</div>
</body>
</html>
Hey guys i was wondering if someone could help with some issues on my code.
Basically ive created 4 elements(divs) in an onclick event.From html i've also done so that same button dissapears
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class= "boton" id="start">Play</button>
<button class= "boton" id="hit">Hit</button>
<button class= "boton" id= "stand">Stand</button>
<script type="text/javascript">
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo= document.getElementsByTagName('body')[0]
var crear_cartas= function() {
var card= document.createElement('div');
var texto =document.createTextNode("CASINO");
card.setAttribute("class","cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick= function(){
crear_cartas()
crear_cartas()
crear_cartas()
crear_cartas()
jugar.setAttribute('class','ocultar')
}
</script>
</body>
</html>
Up to there is ok , but im not sure if from jquery i can apply a filter that activates on the same onclick event that appears in javascript code (on those 4 created elements )to the even ones so that they make an animation lowering slightly the margin.
I've read about it but i am a bit at sea given that the filter would apply to created elements..
Thank you in advance guys
css class ".cartas" code included:
.cartas{
/*display: none;*/
margin: 260px 75px 0 75px;
display: inline-block;
border-radius: 10px;
border: 1px solid black;
padding-top: 50px;
height:100px;
width:100px;
color: #003366;
font-family: Muli,Helvetica Neue,Helvetica,sans-serif;
text-align: center;
background-color: #f0f8ff;
}
Add an onlcick event to all event divs. This event will add a class that will push the elements below those divs downward using a margin-bottom
Snippet below
var counter = 0;
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo = document.getElementsByTagName('body')[0]
var crear_cartas = function() {
card = document.createElement('div');
var texto = document.createTextNode("CASINO");
card.setAttribute("class", "cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick = function() {
for (var x = 0; x < 4; ++x) {
crear_cartas();
if ((x + 1) % 2 == 0) {
card.addEventListener('click', function() {
this.classList.add("move");
})
}
}
jugar.setAttribute('class', 'ocultar')
} //end func
div {
transition: margin-bottom 0.5s;
}
.move {
margin-bottom: 50px;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class="boton" id="start">Play</button>
<button class="boton" id="hit">Hit</button>
<button class="boton" id="stand">Stand</button>
</body>
</html>
I use JavaScript to dynamically create a table. In the picture below, You can see there are 5 horizontal borders. I want to assign each horizontal border an id. For instance, I want to assign the the top border an id of 0; the second top border an id of 1, etc. The code that I wrote is actually assigning the id of each row which is not what I want. When I run my code, I can see the second row shakes rather than the second horizontal border shakes. Basically, I want to create 5 horizontal lines and assign each line a id. Maybe creating a table to get 5 lines is a overkill. Hope someone could help me out. Thank you in advance.
html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
</body>
</html>
/* css: */
.deco {
border: 1px solid black;
}
table {
border-collapse:collapse;
border: 1px solid black;
}
table, td, th {
border: 1px solid black;
padding: 10px 20px;
}
js:
$(document).ready(function() {
var table = document.createElement('table');
for (var i = 0; i < 5; i++){
var tr = document.createElement('tr');
var td1 = document.createElement('td');
tr.appendChild(td1);
table.appendChild(tr);
td1.id = i;// id placed
td1.className = "deco";
}
document.body.append(table);
$('#' + 1).effect("shake");
});
Yes, creating a table just for drawing horizontal lines is an overkill. You can use <hr> tag instead. Just like you have created 5 rows in a table, create 5 <hr. Also, you won't need any CSS decoration.
$(document).ready(function() {
for (var i = 0; i < 5; i++) {
var hr = document.createElement('hr');
hr.id = "hr" + i;
document.body.append(hr);
}
$('#hr' + 1).effect("shake");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Shaking line</h1>
</body>
</html>
How to get new rows onClick only when one line of previous inputs is not empty?
*"one line of previous inputs" - I have 1 row of blank inputs, as soon as I click on it, next row will be created, but I that 1st row is going to be empty or partialy full, than I dont want to create a new row.
The following code is what I have so far which is:
- first row created onLoad
- when clickin on input new row is created
- checkempty funcion is ready to use
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GE Watch</title>
<style type="text/css">
input{width:76px;height:20px;padding:0;margin:0;display:block;float:left}table{padding:0;margin:0;border:thin dotted #333}tr{padding:0;margin:0}td{width:80px;height:20px;padding:0;margin:0;text-align:center}
</style>
<script language="javascript" type="text/javascript">
function addRow(id){
var tbody = document.getElementById
(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr")
var RowCount = 11;
for (i = 1; i <= RowCount; ++i) {
var td = document.createElement("td")
td.appendChild(document.createElement("input"))
td.id = "td" + i;
td.setAttribute("onclick", "javascript:addRow('myTable');")
row.appendChild(td);
}
tbody.appendChild(row);
}
function checkempty() {
checking = document.getElementById(cellId);
if (checking.value == "" || " " || null) {
return false;
} else {
return true;
}
}
</script>
</head>
<body onLoad = "javascript:addRow('myTable')">
Add row
<table id="myTable">
<tr>
<td>#</td>
<td>CHECK</td>
<td>DATE</td>
<td>HOUR</td>
<td>MIN</td>
<td>MARKET</td>
<td>MAX</td>
<td>BUY</td>
<td>SELL</td>
<td>PROFIT</td>
<td>FLIP TIME</td>
</tr>
</table>
</body>
</html>
Here is a quick example using jquery ( quickly tested in ff 11 && chrome) :
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GE Watch</title>
<style type="text/css">
body{
padding:0px;
margin:0px;
font-size:11px;
color:#333;
font-family:Arial;
background:#efefef;
text-align:center;
}
#content{
width:600px;
padding:15px;
margin:20px auto;
background:#fff;
border:solid 1px #ddd;
text-align:left;
}
table{
width:100%;
padding:0;
margin:0;
border:solid 1px #ddd;
border-collapse:collapse;
}
tr{
padding:0;
margin:0
}
td{
width:80px;
height:20px;
padding:4px;
margin:0;
border:solid 1px #ebebeb;
text-align:center
}
table#myTable td input[type="text"]{
padding:2;
margin:0;
display:block;
border:solid 1px #ddd;
}
table#myTable td input[type="text"].incomplete{
border:solid 1px #ff0000;
}
th{
font-size:11px;
border:solid 1px #ddd;
background:#efefef;
text-align:center;
color:#999;
}
#addRow{
padding:3px;
width:80px;
text-align:center;
text-decoration:none;
background:#0000ff;
color:#fff;
margin:10px 0px;
font-weight:bold;
font-size:10px;
display:inline-block;
}
#message{
color:#DB1925;
padding:4px;
font-size:10px;
font-weight:bold;
border:dotted 1px #DB1925;
background:#FFBABA;
display:inline-block;
opacity:0;
}
</style>
</head>
<body>
<div id="content">
Add row
<span id="message">Please complete inputs that are in red</span>
<br style="clear:both"/>
<table id="myTable">
<thead>
<tr>
<th>CHECK</th>
<th>DATE</th>
<th>HOUR</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var rowTemplateHTML = '<tr class="dataRow"><td><input type="text" value=""/></td><td><input type="text" value=""/></td><td><input type="text" value=""/></td></tr>';
$(document).ready(function(){
var $tableBody = $('#myTable'),
$addRowButton = $('#addRow'),
$message = $('#message');
$addRowButton.click(function(event){
event.preventDefault();
$('.incomplete').removeClass('incomplete');
addRow();
});
function addRow(){
if(previousRowNotEmpty()){
$message.css("opacity", "0");
$tableBody.append(rowTemplateHTML);
}else{
//alert('please complete previous row');
$message.animate({
"opacity" : "1"
}, 50);
}
}
function previousRowNotEmpty(){
var rowComplete = true;
$tableBody.find('tr.dataRow:last').find('input[type="text"]').each(function(index, input){
var $input = $(input);
if($input.val() === ""){
$input.addClass('incomplete');
rowComplete = false;
}
});
return rowComplete;
}
function addFirstRow(){
$tableBody.append(rowTemplateHTML);
}
addFirstRow();
})
</script>
</body>
</html>
Adding to what Paul said -- You have many issues
First, the issues you have
1) onload = ....
Never set the onload event, but instead add to it. read https://stackoverflow.com/a/10017532/643500
2) setAttribute vs click
button_element.setAttribute('onclick','doSomething();'); // for FF
button_element.onclick = function() {doSomething();}; // for IE
3) set the onclick to the row instead of each cell
For the solution:
Steps are:
1) User clicks on a row, get the previous row -- or all rows, not sure what you want
if(elem.previousSibling != null){
while (elem.previousSibling.tagName == 'TR') {
...
}
}
2) Check each cell in that row
if(elem.previousSibling != null){
while (elem.previousSibling.tagName == 'TR') {
var cells = elem.previousSibling.childNodes;
for(i = 0 ; i < cells.length; i++){
if(!checkIfEmpty(cells[i])){
canInsertRow = true;
}
}
elem = elem.previousSibling;
}
}
here is an INCOMPLETE jsfiddle .. I just used it to mess around with your code -- Not in the writeCode-mode to write it all, but you should understand the concept http://jsfiddle.net/mHgms/12/
First, your checkempty function needs to accept a parameter, like: checkempty(cellId)
Second, your addrow function should give ids and names to the input elements, otherwise you won't be able to ever process the form in a sufficient way. Also give ids or data attributes to the rows.
Third, if you got your addrow function to do that, you only need to get the last row, extract the row id from a data attribute and use that to go through all input elements within that row. If at least one input element's value is not null your script can add a new row.