So I am using the example code from this link
Select Cells On A Table By Dragging
to build a grid of numbers 1-192 that part works great, but I am curious how would I return the "highlighted" cells to php?
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css" media="screen">
table td {
width:50px;
height:50px;
text-align:center;
vertical-align:middle;
background-color:#ccc;
}
table td.highlighted {
background-color:#999;
}
</style>
</head>
<body>
<form action='test.php' method='post'>
<table cellpadding="0" cellspacing="1" id="our_table">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
<table>
<tbody>
<tr>
<input type='submit' name='test' value = 'test' />
</tr>
</tbody>
</table>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var isMouseDown = false;
$("#our_table td")
.mousedown(function () {
isMouseDown = true;
$(this).toggleClass("highlighted");
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).toggleClass("highlighted");
}
})
.bind("selectstart", function () {
return false; // prevent text selection in IE
});
$(document)
.mouseup(function () {
isMouseDown = false;
});
});
</script>
</body>
** added in the button
This might need some slight modification for your specific case, but it should be pretty close to what you need. I've included comments to indicate what's happening.
// bind a click handler to your button
$("input[name='test']").on("click", function() {
var selectedValues = [];
// iterate through each of the highlighted cells
$(".highlighted").each(function(){
// push the content of the current cell into the array
selectedValues.push($(this).text());
});
// invoke ajax to send the data to your server
$.ajax({
url: "http://yourdomain.com/somepage.php",
method: "GET",
data: {
selectedValues: selectedValues
},
success: function(){
alert("It Worked!");
},
error: function(){
alert("It Didn't Work :(");
}
});
});
Related
My goal is to attach a hidden value of either 0 or 1 to each entry in a table. If the value is a 0 the entry will be colored Red, and if the value is a 1, the entry will be colored green.
I tried implementing this using filters and creating two different classes 'success' and 'danger' if the class 'success was added to the entry then the entry would be colored green and for 'danger' it would be colored red. I was able to get this to work by using a filter that checks for the string "True" or "False" in the entry. If the String is "True" then it adds the success class if if it is false it adds the danger class. This works however I now want to expand this idea so that every entry will have an assigned boolean.
I am looking for some help on how to do this.
This is my current code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.success { background:green; }
.danger { background:red; }
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
$(function(){
$('tr:has(td:contains("True"))').addClass('success');
$('tr:has(td:contains("False"))').addClass('danger');
});
</script>
</head>
<body>
<table width="100%">
<tr><td>True</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>False</td></tr>
<tr><td>True</td></tr>
<tr><td>True</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>
</html>
I would recommend you add an id to your table so you can access it directly.
After that we get the array of tr. Also I can recommend here you validate that this array is of the same size than your results array. Just for good measure.
Then we can just iterate over this array using jQuery's each function.
let status = [false , true , false , true , false , false , true , true ];
$('#mainTable tr').each((i,tr) => {
if(status[i])
$(tr).addClass('success');
else
$(tr).addClass('danger');
})
.success { background:green; }
.danger { background:red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table id='mainTable' width="100%">
<tr><td>True</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
</table>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "rm3Hz"
}], "*")
}
</script>
</body>
Hope this helps :)
Something like this seems to work...
<table width="100%">
<tr><td>True</td></tr>
<tr><td>2</td><td style="display:none">0</td></tr>
<tr><td>3</td><td style="display:none">1</td></tr>
<tr><td>4</td><td style="display:none">0</td></tr>
<tr><td>5</td><td style="display:none">0</td></tr>
<tr><td>6</td><td style="display:none">1</td></tr>
<tr><td>7</td><td style="display:none">0</td></tr>
</table>
You can add an own property (e.g. data-boolean) to your cells.
//get all elements with attribute data-boolean and convert the HTML collection into an array
var aCells = [].slice.call(document.querySelectorAll("[data-boolean]"));
//Loop the elements and add the styleclass
aCells.forEach(function(v,i){
if(v.getAttribute("data-boolean") === "true"){
v.classList.add("success");
}
if(v.getAttribute("data-boolean") === "false"){
v.classList.add("danger");
}
});
.success {
background: green;
}
.danger {
background: red;
}
<table width="100%">
<tr>
<td data-boolean="true">True</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td data-boolean="false">False</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
</table>
I apply FineUploader to an element, then clone it. The new element will open the file upload dialog, but won't upload a file. How can this be accomplished?
http://jsfiddle.net/o4z7mtrd/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<!-- <script src="/lib/plugins_3rd/fine-uploader-5.2.1/fine-uploader.js" type="text/javascript"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/fineuploader.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#mytable').find('tr div.upload').each(function(i,v){
console.log(this)
new qq.FineUploaderBasic({
button: this,
request: {
endpoint: 'update.php'
},
});
});
$('#add').click(function(){
$('#clone').clone(true).removeAttr('id').appendTo('#mytable');
});
});
</script>
<style type="text/css">
#clone {display:none;}
</style>
</head>
<body>
<table id="mytable">
<tr id="clone">
<td class="proposal-td">
<div class="upload" title="Upload">
<img src="/lib/templates/back/images/upload.png" alt="Upload">
</div>
</td>
</tr>
<tr>
<td class="proposal-td">
<div class="upload" title="Upload">
<img src="/lib/templates/back/images/upload.png" alt="Upload">
</div>
</td>
</tr>
</table>
<button id="add">Add new</button>
</body>
</html>
The cloned element needs to be binded to the file upload button since this refers to that specific element only. You also don't need to have duplicated HTML code. See this working example.
HTML
<table id="mytable">
<tr class="row">
<td class="proposal-td">
<div class="upload" title="Upload">Upload</div>
</td>
</tr>
</table>
<button id="add">Add new</button>
JS
function bindUploader($element) {
new qq.FineUploaderBasic({
button: $element[0],
request: {
endpoint: '/echo/json/'
},
callbacks: {
onUpload: function (id, name) {
alert('uploaded');
}
}
});
return $element;
}
$(function () {
bindUploader($('#mytable').find('.upload'));
var $row = $('#mytable .row').clone(true);
$('#add').click(function () {
var $clone = $row.clone(true);
bindUploader($clone.find('.upload'));
$clone.appendTo('#mytable');
});
});
http://jsfiddle.net/moogs/o4z7mtrd/5/
From the code below, I can't get the input[radio] to check the selected row in the table. The code below is using HTML5 and JQuery 1.10.2.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
input[type="radio"] {
margin: 10px;
}
</style>
<script src="jquery-1.10.2.min.js" />
<script>
$(function() {
$("#table_list tr").click(function() {
$(this).find("td input:radio").prop("checked", true);
});
});
</script>
</head>
<body>
<table id="table_list">
<thead>
<th></th>
<th>Name</th>
<th>Email</th>
</thead>
<tbody>
<tr>
<td><input type="radio" name="record"/></th>
<td>Sample1</td>
<td>sample_1#sample.com</td>
</tr>
<tr>
<th><input type="radio" name="record"/></th>
<td>Sample1</td>
<td>sample_1#sample.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Your first input is in a td and the second is in a th. You'll have to remove the td from your input selector: working codepen
$(function() {
$("#table_list tr").click(function() {
$(this).find("input:radio").prop("checked", true);
});
});
The attached javascript will work for both.. Another option is to just change the th to a td and keep your selector the way it was.
Note: you have a few more markup issues as people mentioned in the comments. (forgot tr in thead)
Please have a look at http://jsbin.com/atosaq/4/edit
$(document).ready(function(){
$('#table_list tr').on("click",function(){
$(this).find('input[type=radio]').prop("checked", true);
});
});
I have a table with 20 lines, and I wanted their rows to go up (skipping the first row line) after 1 minute the page has loaded.
Ex:
Initial
row1
row2
row3
First steo
row2
row3
row1
second state
row3
row1
row2
Final step
row1
row2
row3
I was doing something like this, but I don't know how to replace the content of the rows.
And if possible do it slowly (gradual would be great but now essencial)
function roll()
{
var oRows = document.getElementById('ultNot').getElementsByTagName('tr');
var iRowCount = oRows.length;
//repeat this iRowCount-1?
for (i=iRowCount; i=2;;i--){
var tempRow= oRows[i];
var origRow;
if (i=rowCount) {
origRow=oRows[1];
} else {
origRow=cRows[i-1];
}
var tempContent=origRow;
//replace the contents of the rows
}
}
thanks a lot for any help
Thanks Razvan, that did the trick. The whole code to do what I wanted (which is to roll the complete group of rows 1 time after 40 seconds):
<!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>
<title></title>
</head>
<body>
<table id="ultNot" style="border: 1">
<tbody>
<tr>
<td>First row</td>
</tr>
<tr>
<td>Second row</td>
</tr>
<tr>
<td>Third row</td>
</tr>
<tr>
<td>Fourth row</td>
</tr>
<tr>
<td>Fifth row</td>
</tr>
</tbody>
</table>
<input type="button" onclick="iniciaScroll()" value="Click" />
<script type="text/javascript">
window.setTimeout(function() {
iniciaScroll();
;
}, 40000);
</script>
<script type="text/javascript">
var interval;
var cont = 0;
var sizeTable = document.getElementById('ultNot').rows.length;
function roll() {
var table = document.getElementById('ultNot');
var rows = table.rows;
var firstRow = rows[1];
var clone = firstRow.cloneNode(true);
table.tBodies[0].appendChild(clone);
table.tBodies[0].removeChild(firstRow);
cont++;
if (cont == (sizeTable - 1)) {
clearInterval(interval);
cont = 0;
}
}
function iniciaScroll() {
interval = window.setInterval(function() {
roll();
}, 3000);
}
</script>
<!-- end: portal_latestthreads -->
</body>
</html>
There probably is a better way but this is all I could come up with until now :)
<!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>
<title></title>
<script type="text/javascript">
function roll() {
var table = document.getElementById('myTable');
var rows = table.rows;
var firstRow = rows[0];
var clone = firstRow.cloneNode(true);
table.tBodies[0].appendChild(clone);
table.tBodies[0].removeChild(firstRow);
}
</script>
</head>
<body>
<table id="myTable" style="border: 1">
<tbody>
<tr><td>First row</td></tr>
<tr><td>Second row</td></tr>
<tr><td>Third row</td></tr>
<tr><td>Fourth row</td></tr>
<tr><td>Fifth row</td></tr>
</tbody>
</table>
<input type="button" onclick="roll()" value="Click"/>
</body>
</html>
I have a table with names that correspond with their urls
I want to use the information in the table to create the urls that the page will go to if I click that row.
I'm using datatables http://www.datatables.net , if someone can point me to code or api for this that'd be great.
FULL CODE: ARTICLE DESCRIBES IT STEP BY STEP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Full Row Select Using jQuery</title>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
.Highlight
{
background-color: #dcfac9;
cursor: pointer;
}
</style>
</head>
<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0" id="link-table">
<tr>
<td>http://www.yahoo.com/</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>http://www.microsoft.com/</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>http://imar.spaanjaars.com/</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script type="text/javascript">
$(function ()
{
// Hide the first cell for JavaScript enabled browsers.
$('#link-table td:first-child').hide();
// Apply a class on mouse over and remove it on mouse out.
$('#link-table tr').hover(function ()
{
$(this).toggleClass('Highlight');
});
// Assign a click handler that grabs the URL
// from the first cell and redirects the user.
$('#link-table tr').click(function ()
{
location.href = $(this).find('td a').attr('href');
});
});
</script>
</body>
</html>
Below are exmaples:
http://imar.spaanjaars.com/549/how-do-i-make-a-full-table-row-clickable-using-jquery
http://imar.spaanjaars.com/312/how-do-i-make-a-full-table-row-clickable