I want to create a password inut that get value (when the user click on the password input) from a table that display numbers from [0-9] using Javascript
This is what i want to do :
Any idea ?!?
Get all the td and attach click event to it, then get the content of the td & append the td value to the value of the input
[...document.querySelectorAll("#passwordTable td")].forEach(function(item) {
item.addEventListener('click', function() {
document.getElementById('pass').value += item.textContent.trim();
})
})
td {
cursor: pointer
}
td:hover {
background: blue;
zoom: 1.1;
color: #fff;
}
<input type='password' id='pass'>
<table border="2" id="passwordTable">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Related
I'm trying to create a simple javascript calculator with divide, multiple, subtract, add, clear, equals, and decimal buttons.
I can't seem to figure out how to add a cell for divide/multiply and decimal.
Any help in trying to resolve this would be greatly appreciated.
function calculate(numEntered) {
if (numEntered == 'C') {
document.getElementById('answer').value = '';
} else if (numEntered == '=') {
document.getElementById('answer').value = eval(document.getElementById('answer').value);
} else {
document.getElementById('answeralue') += numEntered;
}
}
table,
td {
border: 1px solid #000000;
}
td {
cursor: pointer;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<table>
<tbody>
<tr>
<td colspan="3"><input type="text" id="answer" disabled=""></td>
<td onclick="calculate('C');">C</td>
</tr>
<tr>
<td onclick="calculate(1);">1</td>
<td>2</td>
<td>3</td>
<td onclick="calculate('+')">+</td>
</tr>
<tr>
<td onclick="calculate(4);">4</td>
<td>5</td>
<td>6</td>
<td onclick="calculate('-')" ;>-</td>
</tr>
<tr>
<td onclick="calculate(7);">7</td>
<td>8</td>
<td>9</td>
<td onclick="calculate('=')" ;>=</td>
</tr>
</tbody>
</table>
</body>
</html>
You just need to add a row with the rest of the operators * - multiplication, / - division, and decimal point - .
<tr>
<td onclick="calculate('*');">*</td>
<td onclick="calculate('/');">/</td>
<td onclick="calculate('.');">.</td>
</tr>
EDIT: This of course doesn't check if you've placed the operator in an appropriate place.
There's typo in your js code:
document.getElementById('answeralue') += numEntered; // should be ...('answer').value +=...
Also, be aware that eval may open your project for code injection and is really slow.
If you delegate, it is easier to handle the contents of each cell
I also fixed your error in
document.getElementById('answeralue') += numEntered;
which had the wrong ID and needed a .value
const nums = "1234567890";
const oper = "*/+-.";
const actions = "C";
document.getElementById("calc").addEventListener("click",function(e) {
const char = e.target.textContent;
if (char == 'C') {
document.getElementById('answer').value = '';
return;
}
// if (oper.includes(char)) { // for later
if (char === "=") {
document.getElementById('answer').value = eval(document.getElementById('answer').value);
return
}
else document.getElementById('answer').value += char.trim(); // the trim handles empty cells
});
table,
td {
border: 1px solid #000000;
}
td {
cursor: pointer;
min-width: 30px;
}
<table>
<tbody id="calc">
<tr>
<td colspan="3"><input type="text" id="answer" disabled=""></td>
<td>C</td>
<td> </td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
<td>-</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
<td>/</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>=</td>
<td>.</td>
</tr>
</tbody>
</table>
This question already has answers here:
Adding a table row in jQuery
(42 answers)
How can I clone a table row using jQuery?
(1 answer)
Closed 2 years ago.
I wonder whether I can insert rows in html talbe by clicking them.
For example when I prepare this table like below, and by clicking them
<table>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
My desired result is like this.
And I would like to know how to add any rows by clicking
<table>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
.
.
.
.
</tbody>
</table>
If someone has opinion, please let me know.
Thanks
table {
border-collapse:collapse;}
td {
border:solid black 1px;
transition-duration:0.5s;
padding: 5px}
<table>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
You could do it like this:
$(document).ready(function() {
$("table").on( "click", "tr", function() {
$("table").append($(this).clone());
});
});
Note that it's necessary to pass the event from a parent element that's already there when the page is initially loaded - table - to all tr-elements using on().
jQuery on()
If you simply want to create new tr elements and add them to the table when it's clicked, you could simply create a click event handler to do so. For example:
// Store DOM elements in some variables
const [tbodyEl] = document.querySelector('table').children;
const [trEl] = tbodyEl.children;
// Create an event handler function
const sppendAdditionalRowToTable = e => {
const newTrEl = document.createElement('tr');
for (let i = 0; i < 3; i += 1) {
newTrEl.appendChild(document.createElement('td'));
}
tbodyEl.appendChild(newTrEl);
};
// Call handler function on click event
tbodyEl.addEventListener('click', sppendAdditionalRowToTable);
table {
border-collapse: collapse;
}
td {
border: solid black 1px;
transition-duration: 0.5s;
padding: 5px
}
<table>
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
This works:
$( document ).ready(function() {
$('#tableID').on( "click", "tr", function() {
$("tbody").append("<tr><td>0</td><td>1</td><td>2</td></tr>");
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableID">
<tbody>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
I've hardly used javascript and I'm stuck:
I've got a table with id JamTable
I'm trying to write some JS that will get me an array of each <td> value for any row clicked on, so that I can present it in a popup, wing it back to the server via POST request using an ajax call and then update the elements on the table so no postback is required - but so far I can't even get an array populated.
I've got:
$(document).ready(function () {
// Get all table row elements <tr> in table 'JamTable' into var 'tr'
var tr = $('#JamTable').find('tr');
// Bind a 'click' event for each of those <tr> row elements
tr.bind('click', function (e) {
// so that when a row is clicked:
var r = $(this).closest('tr').row;
var myArray = new Array(r.cells);
for (var c = 0, col; col = r.cells[c]; c++) {
alert(col.text)
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JamTable">
<tbody>
<tr>
<td>1</td>
<td>JAM</td>
<td>0.004</td>
</tr>
<tr>
<td>3</td>
<td>BOB</td>
<td>0.24</td>
</tr>
<tr>
<td>9</td>
<td>Nasty Simon</td>
<td>94.3</td>
</tr>
</tbody>
</table>
Yeah I'm totally lost when it comes to JS
Using proper event-delegation is key to success in such scenarios. Catching "click" events on rows is guaranteed to work, even with dynamically-added rows (which were added to the DOM after the event listener was defined)
Breakdown (see comments):
const tableElm = document.querySelector('table')
// listen to "click" event anywhere on the <table>
tableElm.addEventListener('click', onTableClick)
function onTableClick(e){
// event delegation
const rowElm = e.target.closest('tr')
// traverse each child of the row (HTMLCollection). map the text value into an Array
// https://stackoverflow.com/a/34250397/104380
const values = rowElm ? [...rowElm.children].map(td => td.innerText) : []
// print result
console.clear()
console.log( values )
}
<table>
<tbody>
<tr>
<td>1</td>
<td>JAM</td>
<td>0.004</td>
</tr>
<tr>
<td>3</td>
<td>BOB</td>
<td>0.24</td>
</tr>
<tr>
<td>9</td>
<td>Nasty Simon</td>
<td>94.3</td>
</tr>
</tbody>
</table>
You should probably also have some unique id on the <tr> if you are sending data back to the server, it might need to know to which row it belongs to
You can delegate the event from tr. On click of it get the children. Using Array.from will create an array of td. Using map to iterate that and get the text from the td
$("#JamTable").on('click', 'tr', function(e) {
let k = Array.from($(this).children()).map((item) => {
return item.innerHTML;
})
console.log(k)
})
td {
border: 1px solid green;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='JamTable'>
<tbody>
<tr>
<td>1</td>
<td>JAM</td>
<td>0.004</td>
</tr>
<tr>
<td>3</td>
<td>BOB</td>
<td>0.24</td>
</tr>
<tr>
<td>9</td>
<td>Nasty Simon</td>
<td>94.3</td>
</tr>
</tbody>
</table>
You don't need jquery for that.
You may use querySelectorAll to get the trs and simply children on the tr node to get the tds
const trs = [...document.querySelectorAll('tr')]
trs.forEach(tr => tr.addEventListener('click', e => {
// whenever it is clicked, get its tds
const values = [...tr.children].map(td => td.innerText)
console.log('click', values)
}, false))
<table>
<tbody>
<tr>
<td>1</td>
<td>JAM</td>
<td>0.004</td>
</tr>
<tr>
<td>3</td>
<td>BOB</td>
<td>0.24</td>
</tr>
<tr>
<td>9</td>
<td>Nasty Simon</td>
<td>94.3</td>
</tr>
</tbody>
</table>
As #vsync suggested, better to use event delegation in case you have a lot of rows to avoid binding several clicks. This also allows to add more rows later on without to have to bind more click handler
edit2 still thx to #vsync, avoid using onclick and prefer addEventListener to avoid overriding existing events
const table = document.querySelector('table')
table.addEventListener('click', e => {
if (e.target.nodeName !== 'TD') { return }
const values = [...e.target.parentNode.children].map(c => c.innerText)
console.log(values)
}, false)
<table>
<tbody>
<tr>
<td>1</td>
<td>JAM</td>
<td>0.004</td>
</tr>
<tr>
<td>3</td>
<td>BOB</td>
<td>0.24</td>
</tr>
<tr>
<td>9</td>
<td>Nasty Simon</td>
<td>94.3</td>
</tr>
</tbody>
</table>
$('#JamTable tbody tr').click(function () {
var arr = [];
$($(this).children('td')).each(function (index, val) {
arr.push(val.innerText);
});
console.log(arr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="JamTable">
<tbody>
<tr>
<td>1</td>
<td>JAM</td>
<td>0.004</td>
</tr>
<tr>
<td>3</td>
<td>BOB</td>
<td>0.24</td>
</tr>
<tr>
<td>9</td>
<td>Nasty Simon</td>
<td>94.3</td>
</tr>
</tbody>
</table>
I want to remove the TR if its 2nd TD value is similar to another TRs TD value and it's last TD value shouldn't be HIT. And the another scenario is if I have 3 TRs with the same data then 2 of them should be removed and 1 should remain there.
Example:
<table>
<tr>
<td>ID</td>
<td>Ref No</td>
<td>Name</td>
<td>Result</td>
</tr>
<tr>
<td>1</td>
<td>1121</td>
<td>Joseph</td>
<td>CLEAR</td>
</tr>
<tr>
<td>2</td>
<td>1122</td>
<td>Mike</td>
<td>CLEAR</td>
</tr>
<tr>
<td>3</td>
<td>1122</td>
<td>Mike</td>
<td>CLEAR</td>
</tr>
<tr>
<td>4</td>
<td>1122</td>
<td>Mike</td>
<td>HIT</td>
</tr>
<tr>
<td>5</td>
<td>1123</td>
<td>Jim</td>
<td>HIT</td>
</tr>
<tr>
<td>6</td>
<td>1124</td>
<td>James</td>
<td>CLEAR</td>
</tr>
<tr>
<td>7</td>
<td>1124</td>
<td>James</td>
<td>CLEAR</td>
</tr>
<tr>
<td>8</td>
<td>1124</td>
<td>James</td>
<td>CLEAR</td>
</tr>
</table>
What I want:
<table>
<tr>
<td>ID</td>
<td>Ref No</td>
<td>Name</td>
<td>Result</td>
</tr>
<tr>
<td>1</td>
<td>1121</td>
<td>Joseph</td>
<td>CLEAR</td>
</tr>
<tr>
<td>4</td>
<td>1122</td>
<td>Mike</td>
<td>HIT</td>
</tr>
<tr>
<td>5</td>
<td>1123</td>
<td>Jim</td>
<td>HIT</td>
</tr>
<tr>
<td>6</td>
<td>1124</td>
<td>James</td>
<td>CLEAR</td>
</tr>
</table>
Can anybody tell me how to achieve this task?
Any help would be highly appreciated.
So i made this clumsy answer for you. You can check it out in the fiddle here.
EDIT: after some discussion about what should the behaviour be, i updated the fiddle. so now it adds the check if there are any fields in the duplicates that have a "HIT" value in fourth column it will keep the first row with HIT value, otherwise it will keep the first value for each unique second column value.
I am sure there is a better/simpler/more effective way to do this with jQuery, but that is what I came up with. The basic algorithm is this: get all rows and iterate. For each row: find the value in second td (column), check all subsequent rows, fetch the value in second column there and compare them. if they are the same, remove the duplicate row from DOM.
//get the table rows, this should be done with a different selector if there are more tables e.g. with class or id...
$tableRows = $("tr");
//iterate over all elements (rows)
$tableRows.each(function(index, element) {
var $element = $(element);
//get the value of the current element
var currentRowValue = $element.find("td:nth-child(2)").text();
//check all elements that come after the current element if the value matches, if so, remove the matching element
for (var i = index + 1; i < $tableRows.length; i++) {
var $rowToCompare = $($tableRows[i]);
var valueToCompare = $rowToCompare.find("td:nth-child(2)").text();
if(valueToCompare === currentRowValue) {
//remove the duplicate from dom
//if the second row (the duplicate) has 4th column of "HIT" then keep the second row and remove the first row
var duplicateRowFourthColumnVal = $rowToCompare.find("td:nth-child(4)").text();
if(duplicateRowFourthColumnVal == "HIT") {
$element.remove();
}
else {
$rowToCompare.remove();
}
}
}
});`
I'm using Twitter's Bootstrap, which includes a neat hover effect for table rows, and I would like to add the clickability that users will expect when a row lights up. Is there any foolproof way to do this?
Yes I've done my research, but every solution is extremely awkward and flawed at best. Any help would be most appreciated.
The HTML
<table id="example">
<tr>
<th> </th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Edit</td>
<td>Apples</td>
<td>Blah blah blah blah</td>
<td>10.23</td>
</tr>
<tr>
<td>Edit</td>
<td>Bananas</td>
<td>Blah blah blah blah</td>
<td>11.45</td>
</tr>
<tr>
<td>Edit</td>
<td>Oranges</td>
<td>Blah blah blah blah</td>
<td>12.56</td>
</tr>
</table>
The CSS
table#example {
border-collapse: collapse;
}
#example tr {
background-color: #eee;
border-top: 1px solid #fff;
}
#example tr:hover {
background-color: #ccc;
}
#example th {
background-color: #fff;
}
#example th, #example td {
padding: 3px 5px;
}
#example td:hover {
cursor: pointer;
}
The jQuery
$(document).ready(function() {
$('#example tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
I got the code HERE
Although my Google-skills are pretty awesome this is something most people should find...
http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/
But, to make it a lot easier... What about simply giving the row an id and assigning a link to that id with jQuery?
<table>
<tr id='link1'>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr id='link2'>
<td>two-one</td>
<td>two-two</td>
<td>two-three</td>
<td>two-four</td>
</tr>
</table>
and
$("#link1").click(function(){
window.location = "http://stackoverflow.com/questions/12115550/html-clickable-table-rows";
});
$("#link2").click(function(){
window.location = "http:///stackoverflow.com";
});
also see this: http://jsfiddle.net/avrZG/
Without jQuery:
<table>
<tr id='link1' onclick="document.location='http://stackoverflow.com/about';">
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr id='link2' onclick="document.location='http://stackoverflow.com/help';">
<td>two-one</td>
<td>two-two</td>
<td>two-three</td>
<td>two-four</td>
</tr>
</table>
It is not very clear what you are trying to do but you probably want the following. Adding a tabindex to the tr elements will work in most browsers and make it possible to set focus on a row via mouse click or keyboard tab.
<table>
<tr id='link1' tabindex="100">
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr id='link2' tabindex="101">
<td>two-one</td>
<td>two-two</td>
<td>two-three</td>
<td>two-four</td>
</tr>
</table>