I have the following HTML.
<td>
<table class="position">
<tbody>
<tr class="position-numbers">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<script>
let cloneTech = jquery('td').closest('select');
findNext.html(`<h1>hello</h1>`);
</script>
When I click on td I need to find very next select and append the html.
The next().html() is not working on this.
closest only works upward in the dom, if you want to find elements that are nested in an element you need to use .find('select')
This returns all elements that are inside an element, in your case you only have one select inside td so this should work for you.
you also shouldn't use .html() here because this sets the innerHTML, if you want to replace the select then use .replace(), if you want to insert it after the select, use .after()
let cloneTech = jquery('td').find('select');
findNext.after(`<h1>hello</h1>`);
if you click td and you are using jquery, you can make the next:
$(".select-technique").on("click", function(){
$(this).children("select").html(`<h1>hello</h1>`);
})
Or
$(".select-technique").on("click", function(){
$(this).find("select").html(`<h1>hello</h1>`);
})
This will put the h1 tag before the next select tag after you click a td.
<script>
$(document).ready(function () {
$('td').click(function () {
$(this).next().find('select').prepend('<h1>hello</h1>');
});
});
</script>
The html result of this <select><h1>hello</h1></select>. If you want the h1 tags outside the select do this instead
<script>
$(document).ready(function () {
$('td').click(function () {
$(this).next().find('select').before('<h1>hello</h1>');
});
});
</script>
The html result of this <h1>hello</h1><select></select>.
You can do something like this below
<table border="1" cellpadding="5">
<tr>
<td>
<table class="position" border="1" cellpadding="5">
<tbody>
<tr class="position-numbers">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
<td class="select-technique">
<select class="technique-class">
</select>
</td>
</tr>
</table>
<script>
$('td').on('click', function(){
$(this).next('td.select-technique').find('select').css('background','yellow').html('<option>Options</option>');
})
<script>
See the jsfiddle link https://jsfiddle.net/mgnwvrpj/3/
Related
When a cell is clicked the function is suppose to run.
Right now it is working only on the first row.
When i click on the button on a row i want that specific row to affect.
$(document).ready(function() {
function loadHistory() {
$('#btn').data('valType', 'more');
$('#btn').click(function() {
var id = $('#btn').data("valType")
})
}
})
In this case, use class selector, instead of id.
For example, yo have any list:
$(document).ready(function() {
$('.delete').click(function(e) {
$(this).parent().parent().remove();
})
})
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Chair
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Sofa
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Table
</td>
<td>
<button class="delete">Delete</button>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Without the HTML code it is a bit more difficult to answer you, but I try.
Usually the ID is unique, so it's assigned to only one element, so try using the class selector.
Then another thing, I don't know if this is your case, if you go to create the other lines dynamically, the jQuery .click () function will not be able to manage the clicks on the elements created after loading the page. In this case use $.on('click', '.yourClass', function).
I hope I was helpful!
Relatively new to JS, need some help in getting a div to hide/show properly based on a dropdown choice.
If dropdown='no', div should be hidden. If dropdown='yes', div should show. I got the JS to work correctly at first, but once the form saves and I reopen it, the div disappears. I believe I've written the JS wrong by telling the div to show only on change. But I'm too new to know - help!
$('.analysisPub').on('change', function() {
if (this.value === "Yes") {
$("#analysis").show();
} else {
$("#analysis").hide();
}
});
.analysis {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Does this publication include analysis in any form?</td>
<td class="analysisPub" id="analysisPub" name="analysisPub">
<select>
<option value>Yes</option>
<option value>No</option>
</select>
</td>
</tr>
</table>
<div id="analysis" class="analysis">
<table>
<tr>
<td>Test Name</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
</table>
</div>
There were two main mistakes in your code. They are as follows -
1st - you were targetting the <td> rather than the <select>
2nd - your dropdown options were not having values
I've fixed them now. It works as u mentioned in the description.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#dropdownAnalysis').on('change', function() {
if (this.value == 'Yes')
{
$("#analysis").show();
}
else
{
$("#analysis").hide();
}
});
});
</script>
<table>
<tr>
<td>Does this publication include analysis in any form?</td>
<td class="analysisPub" id="analysisPub" name="analysisPub">
<select id="dropdownAnalysis">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
</table>
<div id="analysis" class="analysis">
<table>
<tr>
<td>Test Name</td>
<td>Test 1</td>
<td>Test 2</td>
</tr>
</table>
</div>
I have a link in my HTML that I want to trigger using a click event in jQuery. This content is generated with AJAX. I know that I'm supposed to use .on, so that's what I'm doing. My code does fire on the td when I use this code:
$(".onestepcheckout-summary").on("click", ".wider", function() {
alert('success');
return false;
});
But it's supposed to fire on the anchor tag with the class addsqty. I've tried multiple things like changing the .wider to .wider > a and .wider > .addsqty or simple .addsqty. Why doesn't this work?
Here is my HTML. The AJAX loaded content starts with <table class="onestepcheckout-summary">.
<div class="onestepcheckout-summary">
<table class="onestepcheckout-summary">
<thead>
<tr>
<th class="name" colspan="2">Artikel</th>
<th class="qty">Stück</th>
<th></th>
<th class="total">Zwischensumme</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">
Simpel product </td>
<td class="editcart">
-
</td>
<td class="qty" nowrap="">
<input type="hidden" value="5" id="qty_46" name="cart[46][qty]" class="qtyinput" size="1">
5 </td>
<td class="editcart wider" nowrap="">
+
</td>
<td class="total">
<span class="price">€ 10,00</span> </td>
</tr>
</tbody></table>
<table class="onestepcheckout-totals">
<tbody><tr>
<td style="" class="a-right" colspan="1">
Zwischensumme </td>
<td style="" class="a-right">
<span class="price">€ 145,00</span> </td>
</tr>
<tr>
<td style="" class="a-right" colspan="1">
<strong>Gesamtbetrag</strong>
</td>
<td style="" class="a-right">
<strong id="total-price"><span class="price">€ 145,00</span></strong>
</td>
</tr>
</tbody></table>
</div>
dynamic content never got the click event :
for this you need to use on , bind and delegate:
i always prefer Delegate. Try This :
$("body").delegate(".wider", "click", function() {
alert('success');
return false;
});
You could try in such a way also
$(document).on("click", '.onestepcheckout-summary',function (event) {
// whatever u want ...
});
Change parent div classname also , it seems like both have same class name.
<div class="div-class">
<table class="table-class">
......
</table>
</div>
$('.div-class').on("click", '.onestepcheckout-summary',function (event) {
// whatever u want ...
});
I have a jquery datatable that contains multiple columns and rows as below.
<table>
<thead>
<tr>
<td>Name</td>
<td>Class</td>
<td>Action</td>
<td>Score</td>
<td>Corrected Score</td>
</tr>
</thead>
<tbody>
<tr>
<td>Student1</td>
<td>Math</td>
<td>Add 5
</td>
<td>73</td>
<td>
<input type="text" id="1_final_score" />
</td>
</tr>
<tr>
<td>Student2</td>
<td>Biology</td>
<td>Add 5
</td>
<td>84</td>
<td>
<input type="text" id="2_final_score" />
</td>
</tr>
<tr>
<td>Student3</td>
<td>History</td>
<td>Add 5
</td>
<td>50</td>
<td>
<input type="text" id="3_final_score" />
</td>
</tr>
</tbody>
When i click on the "Add 5" link, I want to add 5 to the score in the corresponding row and insert the result in the final score input field. I have tried using the jquery row-select feature, but am unable to figure out how to accomplish the above.
$(document).ready(function () {
$('table').find('a').click(function () {
var original = parseInt($(this).parents('tr').find('td:nth-child(4)').text()) + 5;
$(this).parents('tr').find('input[type=text]').val(original);
});
});
You can try this:
$(document).ready(function(){
$("a").on("click", function(){
var num=parseInt($(this).closest("td").next("td").text());
num=num+5;
$(this).closest("td").next("td").text(num);
$(this).closest("tr").find("input").val(num);
});
});
FIDDLE
Try with this
$('a:contains("Add 5")').click(function(){
$(this).parents('tr').find('td input:text').val(+$(this).parent().next('td').text() + 5 )
});
FIddle : http://jsfiddle.net/2n0bevxo/172/
I need your help! This is an example of my table code:
<table id='tableName'>
<tbody id='tbody1'>
<tr>
<td>
<input.../>
<input.../>
</td>
</tr>
</tbody>
<tbody id='tbody2'>
<tr>
<td>
<input.../>
<input.../>
</td>
</tr>
</tbody>
</table>
How can I disable all inputs in tbody2?
for jquery 1.6+:
$("#tbody2 input").prop('disabled', true);
Working Demo
for jquery 1.5 and below :
$("input").attr('disabled','disabled');
If you want to do this with pure html and no javascript libraries, add the 'disabled' attribute to your inputs, like this:
<table id='tableName'>
<tbody id='tbody1'>
<tr>
<td>
<input.../>
<input.../>
</td>
</tr>
</tbody>
<tbody id='tbody2'>
<tr>
<td>
<input... disabled />
<input... disabled />
</td>
</tr>
</tbody>
</table>
You could also set the to readonly, if you like:
http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1
For JavaScript
var body2Inputs = document.getElementById('body2').getElementsByTagName('INPUT');
for(var i = 0 ; i < body2Inputs.length; i++)
body2Inputs[i].disabled = true;
You Must Know things in JavaScript just in case you don't need to use Libraries like jQuery