This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
Is there any way to user mousedown event on dynamically added elements
$(function() {
var isMouseDown = false,
isHighlighted;
//$('#our_table').on('mousedown', 'tr', function (event) {
$("#myTable tr").mousedown(function() {
isMouseDown = true;
$(this).toggleClass("highlighted");
isHighlighted = $(this).hasClass("highlighted");
return false; // prevent text selection
}).mouseover(function() {
if (isMouseDown) {
$(this).toggleClass("highlighted", isHighlighted);
}
}).bind("selectstart", function() {
return false;
})
$(document).mouseup(function() {
isMouseDown = false;
});
});
function addRow() {
var arrTables = document.getElementById('myTable');
var oRows = arrTables.rows;
var numRows = oRows.length;
var newRow = document.getElementById('myTable').insertRow(numRows);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
cell1.innerHTML = numRows;
cell2.innerHTML = numRows;
cell3.innerHTML = numRows;
}
table td {
width: 100px;
height: 50px;
text-align: center;
vertical-align: middle;
background-color: #ccc;
border: 1px solid #fff;
}
table tr.highlighted td {
background-color: #999;
}
body {
user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" id="myTable">
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
You have to set the event delegation to body element and then match the event.target to the element you want to trigger your action.
You can check this start, updated your fiddle only for the mousedown method: http://jsfiddle.net/Len7csa0/
Related
I have a table with 2 columns, the first column shows the text, and the other column has a checkbox.
The code is as follows, and the checkboxes are generaged by JavaScript, e.g. var checkbox = document.createElement("input");
<script type="text/javascript">
function create_table() {
var data = ["Sandwidch", "Hamburger", "Bacon"];
var table = document.getElementById("menu");
for (var option in data) {
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
cell1.innerHTML = data[option];
var cell2 = row.insertCell(1);
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "choiceCbx";
cell2.appendChild(checkbox);
}
}
window.onload = create_table;
</script>
<body>
<table id="menu">
<tr>
<th>Food</th>
<th>Choice</th>
</tr>
</table>
</body>
When the user clicks on one of the rows in the table, if the checkbox on the row was checked, it should become unchecked, and vice versa.
I used the following code to toggle the checkbox but in vain, it seems just detects the "TH" row, but not the "TR" rows:
$(document).ready(function() {
$('#menu tr').click(function(event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
});
How should I modify my code to make the toggle function work?
you can do that...
const table_foods = document.querySelector('#records tbody')
table_foods.onclick=e=>
{
if (e.target.matches('input[type=checkbox]')) return // to not disturb natural check action
let chkBx = e.target.closest('tr').querySelector('input[type=checkbox]')
chkBx.checked = !chkBx.checked
}
/* cosmetic part */
table {
border-collapse: collapse;
margin-top: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
thead {
background-color: aquamarine;
}
tbody {
background-color: #b4c5d8;
}
td, th {
border: 1px solid grey;
padding: .3em .7em;
}
<table id="records" class="content">
<thead>
<tr> <th>Food</th> <th>Choice</th> </tr>
</thead>
<tbody>
<tr>
<td>Sandwitch</td>
<td><input type="checkbox" name="answerCbx-1" /></td>
</tr>
<tr>
<td>pizza</td>
<td><input type="checkbox" name="answerCbx-2" /></td>
</tr>
</tbody>
</table>
Try this. Also you might want to add more details to your question because the HTML does not contain any checkboxes
https://forum.jquery.com/topic/toggle-checkboxes-in-a-table-after-click-function
I have table, with data, and i need for td:eq(4) change class, and box for baghround.
I have this code:
$('tr').each(function () {
var rowCol = $(this);
rowCol.find('td:eq(4)').each(function () {
var rowValue = parseFloat($(this).text());
console.log(rowValue === 0)
if (rowValue > 1) {
$('.defects').addClass('def').removeClass('defects');
} else {
$('.def').addClass('defects').removeClass('def');
}
});
});
.defects {
background: #e74c3c;
color: #fff;
padding: 3px;
border-radius: 6px;
}
And if at this td i have value more then 1, i add bg red box.
But nox, something went wrong.
Without seeing your html, I can only guess about how it looks based on your code, but try this:
$('tr').each(function() {
var rowCol = $(this);
rowCol.find('td:eq(4)').each(function() {
var mytd = $(this);
var rowValue = parseFloat($(this).text());
console.log(rowValue === 0)
if (rowValue > 1) {
mytd.addClass('def').removeClass('defects');
} else {
mytd.addClass('defects').removeClass('def');
}
});
});
first of, I'm assigning your td:eq(4) to a variable var mytd = $(this);.
then I'm replacing $('.defects') with mytd
Code
$('tr').each(function() {
var rowCol = $(this);
rowCol.find('td:eq(4)').each(function() {
var mytd = $(this);
var rowValue = parseFloat($(this).text());
console.log(rowValue === 0)
if (rowValue > 1) {
mytd.addClass('def').removeClass('defects');
} else {
mytd.addClass('defects').removeClass('def');
}
});
});
.defects {
background: #e74c3c;
color: #fff;
padding: 3px;
border-radius: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>0</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
You can run the demo above and see the result.
The code basically edit a table cell.
I want to use the not() method so that everytime I click outside the temporary input created I replace it with a table cell. I guess the code run in a block and doesn't detect any input with an id of "replace" so how can I fix that ?
Also I want to store the element (th or td) that fire the first event(dblclick) so that I can use it to replace the input with the right type of cell but it seems to only stores the element that first triggers the event and I don't really understand why.
Full code here
$(function () {
$(document).on("dblclick", "th, td", function (event) {
var cellText = $(this).text();
$(this).replaceWith("<input type='text' id='replace' value='" + cellText + "'>");
var $typeCell = $(event.currentTarget); // Store element which trigger the event
$("body").not("#replace").on("click", function () { // .not() method
cellText = $("#replace").val();
if ($typeCell.is("th")) {
$("#replace").replaceWith("<th scope='col'>" + cellText + "</th>");
}
else {
$("#replace").replaceWith("<td>" + cellText + "</td>");
}
});
});
});
I have modified HTML and JavaScript to avoid any possible errors. The correct practice is to wrap all th's in a thead and all td's in tbody.
$(document).on("dblclick", "th, td", function(event) {
var cellText = $(this).text();
$(this).replaceWith("<input type='text' id='replace' value='" + cellText + "'>");
});
$("body").on("click", function() {
if (event.target.id != 'replace' && $('#replace').length != 0) {
var cellText = $("#replace").val();
if ($('#replace').parents().is('thead'))
$("#replace").replaceWith("<th scope='col'>" + cellText + "</th>");
else
$("#replace").replaceWith("<td>" + cellText + "</td>");
}
});
table {
border-collapse: collapse;
margin: 20px;
min-width: 100px;
}
table,
th,
td {
border: 1px solid grey;
padding: 4px;
}
th {
background: springgreen;
}
tr:nth-child(odd) {
background: rgba(0, 255, 127, 0.3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table>
<thead>
<tr>
<th scope="col">Uno</th>
<th scope="col">Dos</th>
<th scope="col">Tres</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr>
<td>Data4</td>
<td>Data5</td>
<td>Data6</td>
</tr>
</tbody>
</table>
</div>
I have three input box and below one button
when I click that button I want input data should come into html table and sholud able to delete that record
Kindly help me out
advance thanks
I did the same with one input box. So making it for three shouldn't be an issue. You must be looking out for this code:
$("table").on("click", "tbody tr td a", function () {
$(this).closest("tr").remove();
return false;
});
You can either press Enter or click on the button to insert temp data. Okay, just heads up, as you didn't put enough code, you can do it this way:
$(function () {
$("#tempInsert").keyup(function (e) {
if (e.keyCode == 13)
insertRow();
});
$("#tempBtn").click(function () {
insertRow();
});
$("table").on("click", "tbody tr td a", function () {
$(this).closest("tr").remove();
return false;
});
});
function insertRow() {
if ($("#tempInsert").val().length > 0)
$("table tbody").append('<tr><td>' + $("#tempInsert").val() + '</td><td><a href="#">×</td></tr>');
$("#tempInsert").val("");
}
* {font-family: 'Segoe UI'; text-decoration: none;}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<input type="text" id="tempInsert" />
<input type="button" id="tempBtn" value="Add" />
<table width="100%">
<thead>
<tr>
<th width="85%">Stuff</th>
<th width="15%">Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
I supposed that you are absolutely new and I wrote a simple example for you, just to get the idea of how to do.
HTML
<table style="border: 1px solid red; width: 200px; height: 80px; ">
<tr>
<td id="nm"></td>
</tr>
<tr>
<td id="fnm"></td>
</tr>
<tr>
<td id="ag"></td>
</tr>
</table>
Name : <input type="text" id="n"><br />
F/Name: <input type="text" id="fn"><br />
Age : <input type="text" id="age"><br />
<button>Click</button>
SCRIPT
$(function(){
$('button').click(function(event) {
$('#nm').text($('#n').val());
$('#fnm').text($('#fn').val());
$('#ag').text($('#age').val());
$('#n').val('');
$('#fn').val('');
$('#age').val('');
});
});
$('#submitBtn').click(function(){
var input1 = $('#input1').val();
var input2 = $('#input2').val();
var input3 = $('#input3').val();
$('#td1').html(input1);
$('#td2').html(input2);
$('#td3').html(input3);
});
<table>
<tr>
<td id="td1"></td>
<td id="td2"></td>
<td id="td3"></td>
</tr>
</table>
Try this Demo
function Add() {
var tbl = document.getElementById("tbl");
var fname = document.getElementById("FName").value;
var lname = document.getElementById("LName").value;
var city = document.getElementById("City").value;
if (fname == "" && lname == "" && city == "")
alert("Enter Text in input box");
else {
var tblcount = tbl.rows.length;
var row = tbl.insertRow(tblcount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = fname;
cell2.innerHTML = lname;
cell3.innerHTML = city;
}
}
#tbl tr td {
padding: 0 10px;
}
<input id="FName" type="text"></input>
<input id="LName" type="text"></input>
<input id="City" type="text"></input>
<button id="btnAdd" onclick="Add();">Add</button>
<table id="tbl">
<tr>
<td>Fisrt Name</td>
<td>Last Name</td>
<td>City</td>
</tr>
</table>
I have this table:
<table border="1">
<tr>
<td></td>
<td>Banana</td>
<td>Orange</td>
<td>Plum</td>
</tr>
<tr>
<td>Banana</td>
<td>1:1</td>
<td>1:2</td>
<td>1:3</td>
</tr>
<tr>
<td>Orange</td>
<td>2:1</td>
<td>1:1</td>
<td>1,5:1</td>
</tr>
<tr>
<td>Plum</td>
<td>1:3</td>
<td>2:1</td>
<td>1:1</td>
</tr>
and CSS:
td {
height:60px;
width:60px;
text-align:center;
}
td:hover{
background-color:red;
}
What I want to do, is when I for example point my mouse on 1:3 table cell, it should highlight together with Banana and Plum cells.
Any easy way to do it?
Here's fiddle:
http://jsfiddle.net/CZEJT/
If you dont mind a bit of Javascript in there to ensure compatibility, take a look at this JSFiddle
HTML:
<table>
<tr>
<th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
</tr>
<tr>
<th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>
<tr>
<th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>
<tr>
<th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>
<tr>
<th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>
CSS:
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th, .ff-fix {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
tr:hover{
background-color: #ffa;
}
}
JS:
function firefoxFix() {
if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {
var tds = document.getElementsByTagName( 'td' );
for( var index = 0; index < tds.length; index++ ) {
tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';
};
var style = '<style>'
+ 'td { padding: 0 !important; }'
+ 'td:hover::before, td:hover::after { background-color: transparent !important; }'
+ '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', style );
};
};
firefoxFix();
below is an example from one of my sites (css):
/*when hover over shape 5 dim shape 5*/
#shape5{
opacity:1.0;
filter:alpha(opacity=100);}
#shape5:hover{
opacity:0.4;
filter:alpha(opacity=40);}
/*When hoverover text5 dim shape 5!*/
#text5:hover + #shape5{opacity:0.4;
filter:alpha(opacity=40);}
Hope that helps!!
Oh Also view: How to affect other elements when a div is hovered
would you like something like this?
unfortunately it would be necessary some javascript
HTML
<table border="1">
<tr>
<td></td>
<td id='1'>Banana</td>
<td id='2'>Orange</td>
<td id='3'>Plum</td>
</tr>
<tr>
<td>Banana</td>
<td class='o1'>1:1</td>
<td class='o2'>1:2</td>
<td class='o3'>1:3</td>
</tr>
<tr>
<td>Orange</td>
<td class='o1'>2:1</td>
<td class='o2'>1:1</td>
<td class='o3'>1,5:1</td>
</tr>
<tr>
<td>Plum</td>
<td class='o1'>1:3</td>
<td class='o2'>2:1</td>
<td class='o3'>1:1</td>
</tr>
</table>
JAVASCRIPT
var cells1 = $('.o1');
cells1.on('mouseover', function(){
$($(this).parent().children()[0]).css({background: '#ddd'})
$('#1').css({background: '#ddd'})
})
cells1.on('mouseout', function(){
$($(this).parent().children()[0]).css({background: 'none'})
$('#1').css({background: 'none'})
})
var cells2 = $('.o2');
cells2.on('mouseover', function(){
$($(this).parent().children()[0]).css({background: '#ddd'})
$('#2').css({background: '#ddd'})
})
cells2.on('mouseout', function(){
$($(this).parent().children()[0]).css({background: 'none'})
$('#2').css({background: 'none'})
})
var cells3 = $('.o3');
cells3.on('mouseover', function(){
$($(this).parent().children()[0]).css({background: '#ddd'})
$('#3').css({background: '#ddd'})
})
cells3.on('mouseout', function(){
$($(this).parent().children()[0]).css({background: 'none'})
$('#3').css({background: 'none'})
})
CSS
td {
height:60px;
width:60px;
text-align:center;
}
td:hover{
background-color:red;
}
Try this:
Fiddle
Without changing your html structure or adding any third party library:
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var tds = document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
var elem = document.getElementsByTagName('td')[i];
elem.addEventListener('mouseover', function () {
var text = this.innerHTML;
for (var j = 0; j < tds.length; j++) {
var elem2 = document.getElementsByTagName('td')[j];
if (elem2.innerHTML == text) {
elem2.style.background = 'red';
}
}
}, false);
elem.addEventListener('mouseout', function () {
for (var j = 0; j < tds.length; j++) {
var elem2 = document.getElementsByTagName('td')[j];
var text = this.innerHTML;
if (elem2.innerHTML == text) {
elem2.style.background = 'none';
}
}
}, false);
}
}, false);
</script>
I apologise that my answer is only in pseudo code, however I would approach this problem by using javascript (most possibly Jquery). I hope this makes sense...
<table id="tbl"> - so I would give the table an ID
<td onHover="changeHeaderColummns(this)"></td> - then on each of the columns have a jsMethod that fires.
<script>
changeHeaderColumsn(col)
{
var colIndex = col.Index; //get the current column index
var row = GetHeaderRow(); // get the header row
highLightColumn(row, colIndex); //change the colour of the cell
//with the same index in the header
row = getCurrentRow(col.RowIndex); //now get the current row
highlightColumn(row, 0); //change the colour of the cell
//with the index of 0
}
getHeaderRow()
{
return getRow(0);
}
getRow(rowIndex)
{
var table = document.getElementByID("tbl);
return table.rows[rowIndex];
}
highlightColumn(row, colIndex)
{
row[colIndex].style.backgroundcolor = "red";
}
for highlight columns you must use js like this jsfiddler. It's work with jQuery ;)
With code
Using jquery
fiddle: http://jsfiddle.net/itsmikem/CZEJT/12/
Option 1: highlights the cell and just the named fruit cells
$("td").on({
"mouseenter":function(){
$(this).closest("tr").find("td:first-child").css("background","#f99");
var col = $(this).index();
$(this).closest("table").find("tr:first-child").find(String("td:nth-child(" + (col + 1) + ")")).css("background","#f99");
$(this).css("background","#f00");
},
"mouseleave":function(){
$(this).closest("table").find("td,tr").css("background","none");
}
});
Option 2: highlights entire rows and columns that intersect the hovered cell
$("td").on({
"mouseenter": function () {
$(this).closest("tr").css("background", "#f99");
var col = $(this).index();
var myTable = $(this).closest("table");
var rows = $(myTable).find("tr");
$(rows).each(function (ind, elem) {
var sel = String("td:nth-child(" + (col + 1) + ")");
$(this).find(sel).css("background", "#f99");
});
$(this).css("background", "#f00");
},
"mouseleave": function () {
$(this).closest("table").find("td,tr").css("background", "none");
}
});