So I’m basically trying to do the front end for a inventory sheet. For simplicity let’s just say it’s 3 Columns. First 2 columns will be In stock/ rented. Last column will be for me to either add or subtract. I don’t want to have to do this for every row(item). Is there a better way to have only one submit button at the bottom of the table? This is what I currently have for one row
<tr>
<td>
<form>
<input type=”number”>
<input type=“submit”>
</form>
</td>
</tr>
As you can see this will be many submit buttons that will have to update row by row. How can I simplify?
You can use
function submits(){
const row1 = document.querySelectorAll(".row1");
const row2 = document.querySelectorAll(".row2");
for (let i = 0; i < row1.length; i++) {
row1values=row1values+","+nodeList[i].value;
}
for (let i = 0; i < row2.length; i++) {
row2values=row2values+","+nodeList[i].value;
}
}
function alerts(){
alert(allvalues)
}
var row1values = 0;
var row2values = 0;
//add onclick on submit at use event.preventDefault;
//The firsy coordinate will be 0,0
//you can join them lateer
For the first question using the colspan property in html5 will help.
The last line of code will be
<tr><td colspan="2" style="text-align:center;background-color:blue;"><input type="button" onclick="submits()" value="Submit"></td></tr>
I have an html page with a table (3 columns) and I have 2 checkboxes, the table has more that 1000 rows...
Those are the checkboxes:
<label><input type="checkbox" id="ctimeout" name="ctimeout" value="TRUE"><span>Connect Timeout</span></label>
<label><input type="checkbox" id="rtimeout" name="rtimeout" value="TRUE"><span>Read Timeout</span></label>
When I click on the checkbox Connect Timeout I will search in the connect column and if the value is larger that 0 I hide that row and only keep the row if the value is 0. Also since I only want the results from connect column I hide whole read column. The same thing with the Read Timeout checkbox but reverse, I check the read column for 0 and I hide the whole connect column.
<table id=totable>
<tr>
<th>service></th>
<th class="ct">connect></th>
<th class="rt">read></th>
</tr>
<tr>
<td>service1</td>
<td class="ct">0</td>
<td class="rt">10</td>
</tr>
<tr>
<td>service2</td>
<td class="ct">2</td>
<td class="rt">0</td>
</tr>
</table>
I'm using JQuery to do all this, the script works as expected but there is a performance issue especially with firefox. Is there a better way to do what I do and minimize the performance degradation.
My JQuery code:
(function($) {
$(function() { $("#rtimeout").click (
function() {
_this = this;
// Show only matching TR, hide rest of them
if($(this).is(":checked")){
$.each($("table#totable td"), function() {
if (($(this).text() > 0 ))
$(this).parent().hide();
$('table#totable td.ct:nth-child(2),th.ct:nth-child(2)').hide();
});}
else if (!$(this).is(":checked")){
$.each($("table#totable td"), function() {
$(this).parent().show();
$('table#totable td.ct:nth-child(2),th.ct:nth-child(2)').show();
})
};
});
$("#ctimeout").click (
function() {
_this = this;
// Show only matching TR, hide rest of them
if($(this).is(":checked")){
$.each($("table#totable td"), function() {
if (($(this).text() > 0 ))
$(this).parent().hide();
$('table#totable td.rt:nth-child(3),th.rt:nth-child(3)').hide();
});}
else if (!$(this).is(":checked")){
$.each($("table#totable td"), function() {
$(this).parent().show();
$('table#totable td.rt:nth-child(3),th.rt:nth-child(3)').show();
})
};
});}
);// end of document ready
})(jQuery);
Don't use Jquery is the best answer.
I have this html/smarty code for a radio button. I would like to extend the area for the selection of the radio button so that the user can more easily select it on this page?
The classic trick of using label is insufficient here. All the actions performed when clicking the button must be performed, see the onchange parameters. I need to make a clickable zone including at least the whole table that contains this line, or even better: a zone that also contains the image above each radio button.
Is that possible in html, css, jquery?
Thanks
<tr>
<td valign="top">
<input value="{$id_attribute|intval}" class="{$groupName}" type="radio" name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination({$groupName});changeCombinationPrice();{if $groupName=='group_1'}getCheckedValue(document.forms['buy_block_form'].elements['group_1']);scaleImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}.jpg');{else if $groupName=='group_2'}changeImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}',{$id_attribute|intval}); {/if}" {if ($groupName=='group_1' and $countGroup1==1) } checked {/if} />
</td>
{assign var="hrup" value=$group_attribute|escape:'htmlall':'UTF-8'|lower}
{if $feact==$hrup}
<td width="17" valign="top">
<script language="javascript" >
Tooltips('{$feact},{$hrup}');
</script>
<div class="tooltip">
<div class="toolimg"><img src="/pixelart/img/layout/corazon.jpg">
</div>
<div class="tooldescrip">{l s="Finition recommandée par l'artiste"}
</div>
</div>
{/if}
</td>
<td>
<div class="imputgroup_{$id_attribute|intval}">{$group_attribute|escape:'htmlall':'UTF-8'}
</div>
</td>
</tr>
<tr>
You need to wrap the clickable content in another tag (A is appropriate) and hook up the event handler to that tag. You'll also have to switch the radio buttons in JavaScript accordingly.
wrapped the area with a a tag:
<a href="Javascript:void()" id="radioClickAreaid{$id_attribute|intval}" onclick="radioClickArea(document.forms['buy_block_form'].elements['{$groupName}'], '{$id_attribute|intval}');javascript:findCombination({$groupName});changeCombinationPrice();{if $groupName=='group_1'}getCheckedValue(document.forms['buy_block_form'].elements['group_1']);scaleImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}.jpg');{else if $groupName=='group_2'}changeImage('{$group_attribute|escape:'htmlall':'UTF-8'}','{$cover.id_image}',{$id_attribute|intval}); {/if}">
that has the same onclick parameters as the onchange from the radio button (not very elegant though!), and that calls a javascript function:
function radioClickArea(radioObj, id_attribute) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == id_attribute.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == id_attribute.toString()) {
radioObj[i].checked = true;
}
}
return false; // so that the link goes nowhere
}
The radio button gets selected OK.
Is there a way not to repeat the onchange/onclick parameters?
Or like suggested here - use tag surrounding your radiobutton or checkbox:
How can I make an HTML radiobutton with a big target area?
I have a table where the user can add rows to it but each row is numbered. Now the user enters a number in a textbox for the number of rows he/she wants to add before they actually start adding rows. Below is the code where if the number of rows that has been added is over the number entered by the user, then it stops adding the rows.
if (qnum > <?php echo (int)#$_POST['textQuestion']; ?>) {
return;
}
Example: if user entered in the number 5 in a textbox, then the user can only add 5 rows, if the user tries to add another row, then no row is added because user can't add more than 5 rows.
What my question is that if the user has already reach the max number of rows they have added, then I want it to disable a textarea (user wont be able to click in the textarea and I want to give it the correct colour so that you can tell the textarea is disabled). I also want to disable a hyperlink so that user cannot click on the hyperlink (again suitable color change so user can tell hyperlink is disabled) Does anyone know how to do this?
Below is code for hyperling and the textarea:
<table id="question">
<tr>
<th colspan="2">
Question Number <span id="questionNum">1</span>
</th>
</tr>
<tr>
<td rowspan="3">Question:</td>
<td rowspan="3">
<textarea id="questionTextArea" rows="5" cols="40" name="questionText"></textarea>
<span href="#" class="link">[Question link]</span>
</td>
</tr>
</table>
Jquery code showing example of how a table row is added:
function insertQuestion(form) {
var questionarea=(form.questionText.length)
? form.questionText[0]
: form.questionText;
var context = $('#optionAndAnswer');
var currenttotal = context.find('.answerBtnsOn').length;
alertErrors = "";
// Note, this is just so it's declared...
if (questionarea.value == ""){
if (qnum > <?php echo (int)#$_POST['textQuestion']; ?>) {
return;
}
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $qid = $("<td class='qid'>" + qnum + "</td>");
$tr.append($qid);
$tbody.append($tr);
}
Html table where the table row is added to:
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="qid">Question No</th>
</tr>
</thead>
<tbody></tbody>
</table>
look at this jsfiddle for example here, you can write a question on top using the textarea and when you have done that then click on the button to add it in a new row. It is the top textarea I want to disable only if the number of rows has met its limit.
Are you adding rows via JavaScript/Ajax or on page load?
If the former (which I'm guessing your first code example illustrates), use a JavaScript counter to represent the number of rows, and when they trigger the add row function (which you write), check that number first; alert and disabled accordingly:
jQuery allows you to disable form elements, and just replace the link with the link text (ie. minus the tag), and modify it's color, either with a $(ele).css() call, or by wrapping it in a span tag.
If the latter, you can just write the textarea via PHP with the disabled="disabled" property added to the opening tag. The link: use the same method as above (wrapping it in a span tag, rather than an a tag).
// To disable
$('.someElement').attr('disabled', 'disabled');
// To enable
$('.someElement').removeAttr('disabled');
Obviously, you need to include the jQuery framework. I usually use Google's: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.
I can't set my table row as link to something. I can use only css and html. I tried different things from div in row to something another, but still can't make it works.
You have two ways to do this:
Using javascript:
<tr onclick="document.location = 'links.html';">
Using anchors:
<tr><td>text</td><td>text</td></tr>
I made the second work using:
table tr td a {
display:block;
height:100%;
width:100%;
}
To get rid of the dead space between columns:
table tr td {
padding-left: 0;
padding-right: 0;
}
Here is a simple demo of the second example: DEMO
I made myself a custom jquery function:
Html
<tr data-href="site.com/whatever">
jQuery
$('tr[data-href]').on("click", function() {
document.location = $(this).data('href');
});
Easy and perfect for me. Hopefully it helps you.
(I know OP want CSS and HTML only, but consider jQuery)
Edit
Agreed with Matt Kantor using data attr. Edited answer above
If you're on a browser that supports it you can use CSS to transform the <a> into a table row:
.table-row { display: table-row; }
.table-cell { display: table-cell; }
<div style="display: table;">
<a href="..." class="table-row">
<span class="table-cell">This is a TD... ish...</span>
</a>
</div>
Of course, you're limited to not putting block elements inside the <a>.
You also can't mix this in with a regular <table>
If you have to use a table, you can put a link into each table cell:
<table>
<tbody>
<tr>
<td>John Smith</td>
<td>123 Fake St</td>
<td>90210</td>
</tr>
<tr>
<td>Peter Nguyen</td>
<td>456 Elm Ave</td>
<td>90210</td>
</tr>
</tbody>
</table>
And make the links fill up the entire cells:
table tbody tr td a {
display: block;
width: 100%;
height: 100%;
}
If you are able to use <div>s instead of a table, your HTML can be a lot simpler, and you won't get "gaps" in the links, between the table cells:
<div class="myTable">
<a href="person1.html">
<span>John Smith</span>
<span>123 Fake St</span>
<span>90210</span>
</a>
<a href="person2.html">
<span>Peter Nguyen</span>
<span>456 Elm Ave</span>
<span>90210</span>
</a>
</div>
Here is the CSS that goes with the <div> method:
.myTable {
display: table;
}
.myTable a {
display: table-row;
}
.myTable a span {
display: table-cell;
padding: 2px; /* this line not really needed */
}
The usual way is to assign some JavaScript to the onClick attribute of the TR element.
If you can't use JavaScript, then you must use a trick:
Add the same link to each TD of the same row (the link must be the outermost element in the cell).
Turn links into block elements: a { display: block; width: 100%; height: 100%; }
The latter will force the link to fill the whole cell so clicking anywhere will invoke the link.
Answer from sirwilliam fits me best. I improved the Javascript with support for hotkey Ctrl + LeftClick (opens page in new tab). Event ctrlKey is used by PC's, metaKey by Mac.
Javascript
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
window.open(url, '_blank');
window.focus();
}
else if(click == 1){
window.location.href = url;
}
return true;
}
});
Example
http://jsfiddle.net/vlastislavnovak/oaqo2kgs/
You can't wrap a <td> element with an <a> tag, but you can accomplish similar functionality by using the onclick event to call a function. An example is found here, something like this function:
<script type="text/javascript">
function DoNav(url)
{
document.location.href = url;
}
</script>
And add it to your table like this:
<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>
I know this question is already answered but I still don't like any solution on this page. For the people who use JQuery I made a final solution which enables you to give the table row almost the same behaviour as the <a> tag.
This is my solution:
jQuery You can add this for example to a standard included javascript file
$('body').on('mousedown', 'tr[url]', function(e){
var click = e.which;
var url = $(this).attr('url');
if(url){
if(click == 1){
window.location.href = url;
}
else if(click == 2){
window.open(url, '_blank');
window.focus();
}
return true;
}
});
HTML Now you can use this on any <tr> element inside your HTML
<tr url="example.com">
<td>value</td>
<td>value</td>
<td>value</td>
<tr>
When i want simulate a <tr> with a link but respecting the html standards, I do this.
HTML:
<table>
<tr class="trLink">
<td>
Something
</td>
</tr>
</table>
CSS:
tr.trLink {
cursor: pointer;
}
tr.trLink:hover {
/*TR-HOVER-STYLES*/
}
tr.trLink a{
display: block;
height: 100%;
width: 100%;
}
tr.trLink:hover a{
/*LINK-HOVER-STYLES*/
}
In this way, when someone go with his mouse on a TR, all the row (and this links) gets the hover style and he can't see that there are multiple links.
Hope can help someone.
Fiddle HERE
This saves you having to duplicate the link in the tr - just fish it out of the first a.
$(".link-first-found").click(function() {
var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});
//Style
.trlink {
color:blue;
}
.trlink:hover {
color:red;
}
<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>
Something along these lines perhaps? Though it does use JS, but that's only way to make a row (tr) clickable.
Unless you have a single cell with an anchor tag that fills the entire cell.
And then, you shouldn't be using a table anyhow.
After reading this thread and some others I came up with the following solution in javascript:
function trs_makelinks(trs) {
for (var i = 0; i < trs.length; ++i) {
if (trs[i].getAttribute("href") != undefined) {
var tr = trs[i];
tr.onclick = function () { window.location.href = this.getAttribute("href"); };
tr.onkeydown = function (e) {
var e = e || window.event;
if ((e.keyCode === 13) || (e.keyCode === 32)) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
this.click();
}
};
tr.role = "button";
tr.tabIndex = 0;
tr.style.cursor = "pointer";
}
}
}
/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));
To use it put the href in tr/td/th that you desire to be clickable like: <tr href="http://stackoverflow.com">.
And make sure the script above is executed after the tr element is created (by its placement or using event handlers).
The downside is it won't totally make the TRs behave as links like with divs with display: table;, and they won't be keyboard-selectable or have status text. Edit: I made keyboard navigation work by setting onkeydown, role and tabIndex, you could remove that part if only mouse is needed. They won't show the URL in statusbar on hovering though.
You can style specifically the link TRs with "tr[href]" CSS selector.
I have another way. Especially if you need to post data using jQuery
$(document).on('click', '#tablename tbody tr', function()
{
var test="something";
$.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){
window.location.href = "http://somepage";
});
});
Set variable sets up variables in SESSIONS which the page you are going to can read and act upon.
I would really like a way of posting straight to a window location, but I do not think it is possible.
Thanks for this. You can change the hover icon by assigning a CSS class to the row like:
<tr class="pointer" onclick="document.location = 'links.html';">
and the CSS looks like:
<style>
.pointer { cursor: pointer; }
</style>
This method is here to give you a choice. Old css trick: filling the parent with position absolute.
<table>
<tr style=position:relative>
<td><a href=# style=position:absolute;inset:0></a>some
<td>cells
<td>in
<td>a row
</table>
inset:0 is a shorthand for top:0;right:0;bottom:0;left:0
we put <a> inside first <td> because this is a good chance to keep validity: only <td> can be a child of <tr>. But you can place it anywhere in the table and it will work.
Can you add an A tag to the row?
<tr><td>
</td></tr>
Is this what you're asking?