I want to remove the current <tr> and the yellow <tr> too when I click to the basket icon on the right.
Here is a screenshot :
Here is my html code of the two rows which I want to delete by the click:
<tr>
<td class="bar_td" colspan=7>
<strong>PRESTATION 2</strong>
</td>
</tr>
<tr class="ligne_suppr">
<td class="jr_td">
<img class="jour_prest" src="img/ico/jour_presta.png" alt="" width="16" height="16" /> Mardi 24 jan 2011
<p>ou</p>
<img class="jour_prest" src="img/ico/jour_presta.png" alt="" width="16" height="16" /> Mercredi 25 jan 2011
</td>
<td class="cr_td">
<select>
<option value="h9">10h30</option>
<option value="h10">11h30</option>
</select>
<select>
<option value="h11">10h30</option>
<option value="h12">11h30</option>
</select>
</td>
<td class="rp_td">
<select>
<option value="h13" SELECTED>2h00</option>
<option value="h14">3h00</option>
</select>
</td>
<td class="mn_td">
<select>
<option value="h15">2h00</option>
<option value="h16" SELECTED>6h00</option>
</select>
</td>
<td class="tt_td">
<strong>8h.</strong>
</td>
<td class="pttc_td">
<strong>148 €</strong>
</td>
<td class="cor_td">
<a href="#">
<img src="img/ico/corbeille.png" alt="" width="13" height="13" />
</a>
</td>
</tr>
and the Javascript code :
<script>
$(".ligne_suppr a").click(function(e) {
e.preventDefault();
($(this).parent()).parent().remove();
})
</script>
But with this code I can only remove the big <tr> and the yellow One stays.
Have you any idea?
This is basically going to tough to do when you dont have a specific way to select the two rows.
Create a global javascript function to remove the elements by taking the element's id
function deleteRows(row, yellow) {
row = document.getElementById(row);
row.parentNode.removeChild(row);
yellow = document.getElementById(yellow);
yellow.parentNode.removeChild(yellow);
}
Using jQuery you can do something like this
$(".ligne_suppr a").click(function(e) {
e.preventDefault();
var toprow = $(this).closest("tr");
toprow.prev().remove(); // remove the yellow
toprow.remove(); // remove the row
});
$('.ligne_suppr a').click(function(e) {
e.preventDefault();
var parent = $(this).parent().parent(); // parent <tr> of the anchor tag
var previous = parent.prev(); // <tr> before the parent <tr>
parent.remove();
previous.remove();
});
Related
I'm using jQuery 1.12.4 to set get the value of the closest preceding element using class selector. I'm unable to select the closest element.
$(function() {
$("[class='quickSelect']").blur(function() {
var obj = $(this);
alert($(this).parent());
// alert($(this).closest("[class~='endDateField']"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td align="right">
Start Date
</td>
<td>
<input type="text" name="debitStartDate" value="" class="dateField startDateField">
</td>
<td align="right">
End Date
</td>
<td>
<input type="text" name="debitEndDate" value="" class="dateField endDateField">
</td>
<td class="debitApportioner" style="align:right">
Quick Select
</td>
<td class="debitApportioner" colspan="2">
<select class="quickSelect">
<option> SELECT </option>
<option> JANUARY </option>
<option> FEBRUARY </option>
<option> MARCH </option>
</select>
<input class="quickSelect" type="text" />
</td>
</tr>
</table>
Try this:
$(".quickSelect").blur(function() {
var obj = $(this);
obj.closest('tr').find('.endDateField'); // will find the endDateField in the current row
});
closest() only traverses up the trees ancestors and stops at the first element that matches the selector so the above says find the closest ancestor tr to the input then find any endDateField inside that tr
I have a dataTable that each row continue same class and same event.
I have this
<td>
<select name="produits" onchange="loadFourAjax(this)" class="produits">
<option value="0" selected="selected">
<c:forEach var="i" items="${produits}">
<option value="<c:out value="${i.id}" />">
<c:out value="${i.designation}" />
</option>
</c:forEach>
</select>
</td>
<td><select name="fournisseurs" class="fournisseurs"
onchange="loadRefFourAjax(this)">
</select>
</td>
<td class="ref">
</td>
<td class="prix">
</td>
<td>
<input name="qte" class="qte" onkeyup="calculTotalHt(this)" type="text"/>
</td>
<td id="total"></td>
My question how i can know that the query come from a current row of table, because i one to use it to select class prix and qte to calculate prix total of each row.
You are already getting the reference to the current element using this
That is
loadFourAjax(this) or loadRefFourAjax(this)
You can access its parent row node (tr) using
function loadFourAjax(thisObj)
{
//other code
var parentTr = thisObj.parentNode.parentNode;
var prix = parentTr.querySelector(".prix").innerHTML;
}
use querySelector to get the prix value
Please move for loop from <td> level to <tr> level and append id (${i.id} from your code) to fournisseurs name.
I am trying to create a table in which when I check a box, if the image displayed is yes.jpg, a number gets added in the output box at the bottom of the column. If not, no number gets added. There are three columns, and each checkbox affects three images and so three output boxes. Here is my code.
<html>
<head>
<script>
function onSelect(rowId)
{
var row = document.getElementById(rowId);
var checkBox = row.getElementsByTagName("checkRow")[0];
var outputRow = document.getElementById("outputRow");
var totalRow1 = outputRow.getElementById("total1");
var totalRow2 = outputRow.getElementById("total2");
var totalRow3 = outputRow.getElementById("total3");
//If box is checked, check images. If they are yes, edit boxes.
if (checkBox.checked)
if (row.getElementById.("image1").src.indexOf(yes.png) > -1)
{
totalRow1.innerHTML = "dfd";
}
else {
//checkBox =
}
}
/*function onCheck()
{
var total1 = document.getElementById("total1");
window.alert("sometext");
total1.innerHTML = "dfd";
} */
</script>
</head>
<body>
<table border="1">
<tr> <!-- Table Header -->
<td>
Checkbox
</td>
<td>
Items
</td>
<td>
Area 1
</td>
<td>
Area 2
</td>
<td>
Area 3
</td>
</tr>
<tr id="checkRow"> <!-- Row 1 -->
<td>
<form>
<input type="checkbox" name="Row1" value="Row1" onclick="onCheck();">
</form>
</td>
<td>
Item
</td>
<td id="image1">
<img src="yes.png" alt="Needed">
</td>
<td id="image2">
<img src="yes.png" alt="Needed">
</td>
<td id="image3">
<img src="no.png" alt="Needed">
</td>
</tr>
<tr id="outputRow"> <!-- Table Bottom -->
<td>
<!--Empty-->
</td>
<td>
Summation
</td>
<td id="total1">
Area 1
</td >
<td id="total2">
Area 2
</td>
<td id= "total3">
Area 3
</td>
</tr>
</table>
</body>
Currently, I am just trying to edit the output text on one of the output boxes (as seen in my onCheck() method). However, even this does not seem to work. I added an alert, which does not happen either. What am I doing wrong?
there are so many things, you are doing wrong,
firstly, you have called onCheck() function upon click on your checkbox, but there is not such javascript function. you have onSelect(id) instead.
second, you are trying to .getElementById your TDs as those ids, 'image1' and all are ids of tds and not imgs
and then you are accessing .src for them, so anyway that is wrong.
Improvements:
change your input checkbox to this:
<input type="checkbox" name="Row1" value="Row1" onchange="onCheck(this);">
what you are doing is that, you are passing reference of your input in the function onCheck(this);
2. now change your markup like this:
<td>
<form>
<input type="checkbox" name="Row1" value="Row1" onchange="onCheck(this);">
</form>
</td>
<td>
Item
</td>
<td >
<img id="image1" src="yes.png" alt="Needed">
</td>
<td >
<img id="image2" src="yes.png" alt="Needed">
</td>
<td >
<img id="image3" src="no.png" alt="Needed">
</td>
</tr>
all i've done is to provide IDs to the right elements i.e. to the IMGs, instead of TDs;
thirdly, make your onCheck() like this:
function onCheck(cb)
{
if(cb.checked===true)
{
if(document.getElementById('image1').src.toString().indexOf('yes')>0){
document.getElementById('total1').innerHTML='555';
}
else
{
document.getElementById('total1').innerHTML='No';
}
if(document.getElementById('image2').src.toString().indexOf('yes')>0){
document.getElementById('total2').innerHTML='555';
}
else
{
document.getElementById('total2').innerHTML='No';
}
if(document.getElementById('image3').src.toString().indexOf('yes')>0){
document.getElementById('total3').innerHTML='555';
}
else
{
document.getElementById('total3').innerHTML='No';
}
}
}
so basically onCheck is pretty much same as your one.
now , see this working fiddle, i've made for you, it works. ofcourse I hate the way you are doing it all. This all can be done in a much easier way.
also, learn about jQuery, it makes life easy.
I am both adding and removing table rows with jQuery. I can add rows easily, but am having trouble removing ones that were created.
You can view the page in action here: http://freshbaby.com/v20/wic/request_quote.cfm, with the relevant code pasted below.
HTML
<table style="width:600px;" id="product-list" summary="Lists details about products users wish to purchase">
<thead valign="top" align="left">
<tr>
<th>Products</th>
<th>Language</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody valign="top" align="left">
<tr>
<td>
<cfselect query="getProductListing" name="product" size="1" display="name" value="name" queryPosition="below">
<option value=""></option>
</cfselect>
</td>
<td>
<select name="language" size="1">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
</td>
<td>
<cfinput name="quantity" required="yes" message="Enter your desired quantity" size="10" maxlength="3" mask="999">
</td>
<td valign="bottom">Add Another Product</td>
</tr>
</tbody>
</table>
JavaScript:
<script>
$(function() {
var i = 1;
$(".addrow").click(function() {
$("table#product-list tbody > tr:first").clone().find("input").each(function() {
$(this).attr({
'id': function(_, id) { return id + i },
'value': ''
});
}).end().find("a.addrow").removeClass('addrow').addClass('removerow').text('< Remove This Product')
.end().appendTo("table#product-list tbody");
i++;
return false;
});
$("a.removerow").click(function() {
//This should traverse up to the parent TR
$(this).parent().parent().remove();
return false;
});
});
</script>
When I click the link to remove the row that said link is contained in, nothing happens. No script error, so it has to be logic.
Try this instead
$("#product-list").on('click','a.removerow',function(e) {
e.preventDefault();
//This should traverse up to the parent TR
$(this).closest('tr').remove();
return false;
});
This will ensure that newly created elements can be removed. When you use the $("a.removerow").click(.. it only affects the elements in existence (none) and not the ones that will be dynamically created.
I have a Drop Down List in a web page, what it currently does is displays an individual image that is selected in the list.
What I want to achieve is if a sector is selected such as pubs for example, It will display a group of images of pubs instead of one individual image, anyone with any knowledge of doing this? If I select another option such as University it would display multiple images of University logos.
Also is there a way to add a mouse-click hyperlink to an image even if I am using it as a drop down list?
I presume this is possible but I cannot find much information on the subject.
Any assistance would be great.
My HTML code:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<form name="mygallery">
<p>
<select name="picture" size="1" onChange="showimage()">
<option selected value="gfx/Marstons.jpg">Marstons pubs</option>
<option value="gfx/NorthUni.jpg" href="http://www.northumbria.ac.uk/">Northumbria University</option>
</select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%">
<p align="center">
<img src="gfx/Marstons.jpg" name="pictures" width="99" height="100">
</td>
</tr>
</table>
My Javascript
function showimage() {
if (!document.images) return
document.images.pictures.src = document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
I am not sure what is your needs but you cannot add an href attribute directly over a select option.
If you want only add the url on you option to apply it on your img when it is selected by the user, you can use the data-* attributes provided by html5.
Here's an example with the code you provided on your request.
JS fiddle for a live test :http://jsfiddle.net/BVAkh/1/
Html part :
<html>
<head></head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<form name="mygallery">
<p>
<select name="picture" size="1" onChange="javascript:showimage()">
<option selected value="gfx/Marstons.jpg">Marstons pubs</option>
<option value="gfx/NorthUni.jpg" data-href="http://www.northumbria.ac.uk/">Northumbria University</option>
</select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%">
<p align="center">
<img src="gfx/Marstons.jpg" name="pictures" width="99" height="100" />
</p>
</td>
</tr>
</table>
</body>
</html>
Js part :
function showimage() {
if (!document.images) return;
var selectedItem = document.mygallery.picture.options[document.mygallery.picture.selectedIndex];
document.images.pictures.src = selectedItem.value;
if(selectedItem.getAttribute("data-href")) {
document.images.pictures.onclick = function() {
window.location.href = selectedItem.getAttribute("data-href");
}
}
else {
document.images.pictures.onclick = null;
}
}
But I think you should rethink about the image change. Maybe set an id to your p and change the content with an innerHTML. You will be able to add a <a></a> tag to your image if the data-href is provided.