I have a table inside a foreach. I want on keyup to show a button in that specific table. Here is my code.
(submitEditedTimes is the button)
$(".editable").on('keyup', function () {
$(".submitEditedTimes").each(function () {
$(this).show();
})
})
Here is the table
<table class="table table-user-information">
<tr>
<td>Finish Time</td>
<td> <input type="text" contenteditable="true" class="editable" value="#k.timeUntil.ToShortTimeString()" style="border: none" /></td>
</tr>
<tr class="submitEditedTimes">
<td></td>
<td><label class="btn btn-danger col-xs-6">Submit</label></td>
</tr>
</table>
Related
I have a single column html table with 20 rows, containing strings (used as tags):
<table id="table_of_tags">
<tr>
<td id="c_01" onclick="Pass_Content_Of_Cell(_param)">Tree</td>
</tr>
<tr>
<td id="c_02" onclick="Pass_Content_Of_Cell(_param)">Flower</td>
</tr>
....
</table>
The function Pass_Content_of_Cell() must pass the contents of the cells clicked and concatenate the tags in a single string of tags: "Flower;Tree;" (WHAT it does is not relevant).
The user can click randomly on any tag and in any order he likes.
Question: What exactly should I use for _param ? I tried this.value and this.text and didn't get anything useful.
Try this
onclick="Pass_Content_Of_Cell(this.innerText)"
or if you want the markup,
onclick="Pass_Content_Of_Cell(this.innerHTML)"
Try this.innerText
<table id="table_of_tags">
<tr><td id="c_01" onclick="Pass_Content_Of_Cell(this.innerText)">Tree</td><tr>
<tr><td id="c_02" onclick="Pass_Content_Of_Cell(this.innerText)">Flower</td><tr>
</table>
If your are using a loop to generate the markup, why you simply didn't do something like:
<tr><td onClick="doSomething('$param')">$param</td></tr>
I cannot imagine the list is hardcoded...
<script type="text/javascript">
function save(val1)
{
alert("you have saved Employee "+document.getElementById(val1).innerText);
}
function del(val1)
{
alert("you have deleted Employee "+document.getElementById(val1).innerText);
}
</script>
<table border="1">
<tr>
<th>EmployeeID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Option</th>
</tr>
<tr>
<td>1590</td>
<td id="c1">Venkatesh</td>
<td>venki#w3s.com</td>
<td>9943243433</td>
<td><input type="checkbox" name="chk" id="chk"></td>
<td><input type="button" value="Delete" id="dlt1" name="dlt1" onclick="del('c1');"><input type="button" value="Save" id="sv1" name="sv1" onclick="save('c1');"></td>
</tr>
<tr>
<td>1591</td>
<td id="c2">amarnath</td>
<td>amar#w3s.com</td>
<td>9943113433</td>
<td><input type="checkbox" name="chk" id="chk"></td>
<td><input type="button" value="Delete" id="dlt1" name="dlt1" onclick="del('c2');"><input type="button" value="Save" id="sv1" name="sv1" onclick="save('c2');"></td>
</tr>
<tr>
<td>1601</td>
<td id="c3">naveen</td>
<td>navs#w3s.com</td>
<td>9943113433</td>
<td><input type="checkbox" name="chk" id="chk"></td>
<td><input type="button" value="Delete" id="dlt1" name="dlt1" onclick="del('c3');"><input type="button" value="Save" id="sv1" name="sv1" onclick="save('c3');"></td>
</tr>
</table>
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 am adding unlimited input field. below code is working fine only the one problem it is adding after the first <tr>. it is not adding the field it after the additional <tr>. if click on add option it is adding <before> or after first <tr>. ignoring the others <tr>.
my html
<table width="100%" cellspacing="0" id="orderchecklist_item_grid_servicecenters" class="data border">
<colgroup><col width="120">
<col>
<col width="100">
<col width="70">
</colgroup><thead>
<tr class="headings">
<th width="80%">Item</th>
<td width="10%" class="last"><button style="" onclick="addfield();" class="scalable add" type="button" title="Add Option" id="add_new_option_button"><span><span><span>Add Option</span></span></span></button></td>
</tr>
</thead>
<tbody id="orderchecklist_item_list">
<tr class="template" id="orderchecklist_item_template1">
<td><input type="text" value="" name="servicename[]" placeholder="check list item" class="input-text">
</td>
<td class="last"><button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="Delete" id="delete_button"><span><span><span>Delete</span></span></span></button></td>
</tr>
</tbody>
<tfoot id="extra_field" class="no-display template">
<tr class="template" id="orderchecklist_item_template">
<td><input type="text" name="item[]" placeholder="check list item" class="input-text"></td>
<td class="last"> <button style="" onclick="removefield(this);" class="scalable deletefield" type="button" title="Delete" id="delete_button"><span><span><span>Delete</span></span></span></button></td>
</tr>
</tfoot>
</table>
my js code for adding and removing field
<script type="text/javascript">
function addfield()
{
var htm= $('extra_field').innerHTML;
$$('#<?php echo $_block->getHtmlId() ?>_list').last('tr').insert({after:htm});
}
function removefield(ele)
{
var row = ele.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
Just insert before hidden extra field.
Code
function addfield()
{
var htm= $('extra_field').innerHTML;
$('extra_field').insert({before:htm});
}
Another Way
function addfield()
{
var htm= $('extra_field').innerHTML;
$$('#orderchecklist_item_list tr').last('tr').insert({after:htm});
}
$$('#orderchecklist_item_list').last('tr') will find tr from orderchecklist_item_list elements. So it returns '#orderchecklist_item_list' it self.
Fiddle and Fiddle 2
I have a table that I want to give the user the ability to select. I added an button, value="Update", to the beginning of the row, and assigned an onclick value. My problem is that I want to send other items(in td>s on the same row) from the row to the function called by the button.
How do I get the information from the row the button is on? I would like to pass the "Name" and "Last Update Time" to the function the button calls. I tried using the following:
$("#Report input[name=btn_id]").closest('td').attr('text')
but it returns "undefined," which I am not surprised by, as I think this is due to it not knowing what row of the table to pull from.
Here is a view of the table:
Here is the code behind the table:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateAppRec(d1)">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Any help would be appreciated.
Embrace the power of this.
Using:
onclick="UpdateRec(this)"
..in your function:
function UpdateRec(el) {
var targetRow = $(el).parents('tr')
...
}
Using this passes a reference to the clicked element. You can then use jQuery to select the parent table row. From there you can use .find() to select anything in that row.
Another way to do this would be to use HTML5 data- attributes on this button itself:
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1)" data-appName="something" />
In the same function you can then use $(el).data('appName') to get the value directly without looking up values in other DOM elements.
//Add a click listener on all your buttons using event delegation
$('#Report').click(onUpdateButtonClicked, 'input[name=btn_id]');
function onUpdateButtonClicked() {
var rowValues = $(this)
.parent() //select parent td
.nextAll() //select all next siblings of that parent td
.map(function () { //loop through the tds, collecting their text value
return $(this).text();
}).get(); //return the result as an array
//do what you want with rowValues
}
I would suggest you to use common class for all update buttons with common click event handler.
Here is the fiddle: http://jsfiddle.net/jwet6z6x/
HTML:
<table align="center" border="1" class="report" id="report">
<thead>
<tr>
<th width="75">Update</th>
<th width="500">Name</th>
<th width="50">Info</th>
<th width="100">location</th>
<th width="100">Last Update Time</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
<tr class="parent" id="other_app">
<td align="center">
<input class="updateBtn" type="button" name="btn_id" value="Update">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Server</td>
<td align="center">2014-03-30 16:20:15</td>
</tr>
</tbody>
Javascript:
$(".updateBtn").click(function(){
var name = $(this).parent().parent().find('td').eq(1).html()
var time = $(this).parent().parent().find('td').eq(4).html()
alert (name);
alert (time);
})
I would do as follow : http://jsfiddle.net/Lk91cpup/2/
<table>
<tr id="row_1">
<td>
<input type="button" id="btn_row_1" class="btn" value="Update">
</td>
<td id="text_row_1">Test1</td>
<td>None</td>
<td>Desktop</td>
<td >2014-06-30 18:22:39</td>
</tr>
<tr id="row_2">
<td>
<input type="button" id="btn_row_2" class="btn" value="Update">
</td>
<td id="text_row_2">Test2</td>
<td>None</td>
<td>Server</td>
<td>2014-03-30 16:20:15</td>
</tr>
</table>
And Javascript
$(document).ready(function(){
$(".btn").click(function(){
var id = this.id.substring(this.id.lastIndexOf("_") + 1);
alert($("#text_row_" + id).text());
});
});
<tr class="parent" id="other_app">
<td align="center">
<input type="button" name="btn_id" value="Update" onclick="UpdateRec(d1, 'Test1', 'None', 'Desktop', '2014-06-30')">
</td>
<td name="App_Name">Test1</td>
<td align="center">None</td>
<td align="center">Desktop</td>
<td align="center">2014-06-30 18:22:39</td>
</tr>
Since you have already written a javascript function call why not just include the things you need right?
This is simplier but not the best practise.
Solution can use jQuery or be plain JavaScript.
I want to remove a table row after user has clicked the corresponding button contained in the table row cell so for example:
<script>
function SomeDeleteRowFunction() {
//no clue what to put here?
}
</script>
<table>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
</tr>
</table>
You can use jQuery click instead of using onclick attribute, Try the following:
$('table').on('click', 'input[type="button"]', function(e){
$(this).closest('tr').remove()
})
Demo
you can do it like this:
<script>
function SomeDeleteRowFunction(o) {
//no clue what to put here?
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
</script>
<table>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
<tr>
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
</tr>
</table>
Using pure Javascript:
Don't need to pass this to the SomeDeleteRowFunction():
<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
The onclick function:
function SomeDeleteRowFunction() {
// event.target will be the input element.
var td = event.target.parentNode;
var tr = td.parentNode; // the row to be removed
tr.parentNode.removeChild(tr);
}
Following solution is working fine.
HTML:
<table>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
<tr>
<td>
<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
</td>
</tr>
</table>
JQuery:
function SomeDeleteRowFunction(btndel) {
if (typeof(btndel) == "object") {
$(btndel).closest("tr").remove();
} else {
return false;
}
}
I have done bins on http://codebins.com/bin/4ldqpa9
As #gaurang171 mentioned, we can use .closest() which will return the first ancestor, or the closest to our delete button, and use .remove() to remove it.
This is how we can implement it using jQuery click event instead of using JavaScript onclick.
$(document).ready(function(){
$("#myTable").on('click','.btnDelete',function(){
$(this).closest('tr').remove();
});
});
table{
width: 100%;
border-collapse: collapse;
}
table td{
border: 1px solid black;
}
button:hover{
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<th>ID</th>
<th >Name</th>
<th>Age</th>
<th width="1%"></th>
</tr>
<tr>
<td >SSS-001</td>
<td >Ben</td>
<td >25</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td >SSS-002</td>
<td >Anderson</td>
<td >47</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td >SSS-003</td>
<td >Rocky</td>
<td >32</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>
<tr>
<td >SSS-004</td>
<td >Lee</td>
<td >15</td>
<td><button type='button' class='btnDelete'>x</button></td>
</tr>