My code http://jsfiddle.net/Vds69/ I want to change current row in a table with new value, if I click on the button at the end of the row. Please help me to write action to change row
HTML
<div class="row-fluid">
<div class="btn-group">
<button class="btn btn-primary action-add-visual-feature"> + new visual feature </button>
<button class="btn btn-danger action-remove-visual-features"> Remove all features</button>
</div>
</div>
JQUERY
$('.action-remove-visual-features').on('click', function() {
console.log("action-remove-visual-features");
$('#table-visual-features tbody').html('');
});
$('.action-add-visual-feature').on('click', function() {
console.log("action-add-visual-feature");
$('#table-visual-features tbody').append('<tr><td>x</td><td>Numeric</td><td>Values to be mapped to the x-axis</td><td><button class="action-change">edit</button> <button class="btn btn-mini btn-danger action-remove-visual-feature">remove</button></td></tr>');
});
$('#table-visual-features tbody').on('click', 'tr button.action-remove-visual-feature', function(e) {
console.log("action-remove-visual-feature!!");
console.log("e action = ", e);
$(this).parents('tr').remove();
});
An HTML5 solution could be by appending the following function
$('#table-visual-features tbody').on('click', 'tr button.action-change', function (e) {
if ($(this).hasClass("changing")) {
var $parentRow = $(this).parents('tr').eq(0);
$(this).removeClass("changing");
$parentRow.removeClass("changing");
$(this).text("edit");
/*$('.action-change').parents('tr').eq(0).find('td').attr("contenteditable","false");*/
$parentRow.find('td').attr("contenteditable","false");
} else {
var $parentRow = $(this).parents('tr').eq(0);
$(this).addClass("changing");
$parentRow.addClass("changing");
$(this).text("stop-edit");
$parentRow.find('td').attr("contenteditable", "true");
}
});
CSS
tr.changing td{
border:1px solid green;
}
http://jsfiddle.net/Vds69/8/
Otherwise, you will have to do something like the following,
when editing
1.append to your td input elements
2.input elements should get their value from the text of td elements
finish editing
1.get the values from input elements
2.remove the input elements
3.set the values as text to the td elements.
You can't edit the HTML table manually. It has to done either programmatic or HTML wise.
Here is better approach.
1) Enclose the td with textbox like
<td><input disabled type="text" value="x"/></td>
Similarly apply to all the td s and disable them.
2) Then for edit, add a click functionality like this
$(document).on('click', '.action-change', function () {
$(this).parent().parent().find('input').prop('disabled', false);
});
Just enable the textbox for editing.
Check the working in JSFiddle
Hope you understand.
Hope something like this is what you want mate... Juz gave some static values for the time being..
$('#table-visual-features tbody').on('click','.action-change',function () {
$(this).parent().siblings('td:eq(0)').html('Visual');
$(this).parent().siblings('td:eq(1)').html('Alpahabet');
$(this).parent().siblings('td:eq(2)').html('123');
});
Fiddle
http://jsfiddle.net/tRhHt/
Related
I would to know if it is possible to move the search function out of an input for a table modified by DataTables. Currently I have a custom input that executes this function:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchNameField').keyup(function () {
oTable.search($(this).val()).draw();
});
})
</script>
the input looks like so:
<label for="searchNameField" class="col col-form-label">Name:</label>
<div class="col-sm-11">
<input type="text" class="form-control ml-0 pl-2" id="searchNameField"
placeholder="Name" autofocus/>
</div>
What I would like to do is move this to a button. What I thought might be possible is the following:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchButton').click(function () {
oTable.search($(this).val()).draw();
});
})
</script>
with the button looking like so:
<button id="searchButton" type="button" class="btn btn-sm btn-success" style="width: 150px">
<i class="fa fa-search">
Search
</i>
</button>
however when I click on the button this does not work. In typing this question I have realised that this is probably because when I click the button, it does not know where to get the filter text from to actually filter the table.
Is there a way I can have a button click that references the input, that then goes and filters the table?
You're right, you need to redefine $(this), which now refers to the button, not the search box:
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchButton').click(function () {
oTable.search($("#searchNameField").val()).draw();
});
// EDIT: Capture enter press as well
$("#searchNameField").keypress(function(e) {
// You can use $(this) here, since this once again refers to your text input
if(e.which === 13) {
e.preventDefault(); // Prevent form submit
oTable.search($(this).val()).draw();
}
});
});
So I have code that takes the input from a text box and adds it to the to do lsit body which is a table element. Each input added creates a new tr that has the value entered into the box and appears with an inline button beside it.
Before I added the buttons, my on click function to remove the TR worked. Now that I am trying to use the buttons to delete the tr on click, it either does nothing or deletes the button but keeps the tr and it's text.
$('input').keypress(function(event){
var x = $('input:first').val();
if(event.which === 13){
$('#listTable').append('<tr class= "listItem"><td><button type="button" class="btn btn-default deleteButton" aria-label="Left Align"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>'+x+'</td></tr>')//adds a new tr with the input from the box and prints it in the td of the tr
$('input').val("");
}
$('.deleteButton').on('click', function(){
$(this).remove();
});
});
Try
$('#listTable').on('click', '.deleteButton' , function(){
alert('remove');
$(this).parent().remove();
//or $(this).closest('.listItem').remove();
});
Instead of
$('.deleteButton').on('click', function(){
$(this).remove();
});
I have the following DOM structure.
<div class="purchase-section">
<div class="purchase">
<input type="submit" id="add-to-cart" class="btn" name="add" value="Add to Cart"> <span class="rc-or">Or</span>
<button class="btn rc-button" id="btn-buy-now" onclick="event.preventDefault(); window.location='https://example.com?productId=681';">Buy Now - 3 installment</button>
</div>
</div>
The button element is added by a script which runs after the page has loaded. I need to change the onclick handler for this button. I tried following but it doesn't work.
$(document).ready(function() {
$('.purchase-section').on('change', '.purchase', function(){
$("#btn-buy-now")[0].onclick = null;
$("#btn-buy-now").click(function() { alert("done") });
});
});
Can anyone please help me with this?
Use $("#btn-buy-now").removeAttr("onclick"); to remove onclick completely and then delegate event to dynamically added element.
$("static_parent").on("event", "dynamic_element", function () {
});
$(".purchase").on("click", "#btn-buy-now", function () {
/* code */
});
Try this:
$(document).ready(function() {
$(".purchase-section").find("#btn-buy-now").removeAttr('onclick');
$(".purchase-section").find("#btn-buy-now").click(function(e) {
e.preventDefault();
alert("done");
});
});
However, it depends on when this element is loaded. You will need to ensure your button is already in the DOM before this script executes, otherwise this may not be effective.
I want to make a div with value like a button then input it to submit value the code look like this.
<div id="btn" name="Dragon" style="width:20px; height:20px; border:1px solid black;"></div>
<input type="submit" id="submita" value="">
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function( event ){
document.getElementById("submita").value = event.target.name;}, false);
}
</script>
the code take a value from div's name atribut then input it to submit value. if it with button element it work but div doesn't work.
how to this?
You need to use the getAttribute() DOM method as name is not a property of a div:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/JM9nH/9/
var btn = document.getElementById('btn');
btn.addEventListener('click', function (event) {
document.getElementById("submita").value = event.target.getAttribute("name");
}, false);
Note: Your example code also has an extra closing } at the end which I removed.
Use attr in jquery to get the name of div
$("#btn").click(function () {
$("#submita").val($(this).attr("name"));
});
DEMO
i have a HTML table and a button send.
First of all the send button must have this style: style.display="none".
But if the table has at least one row the button should be displayed (block/inline);
I still have no idea how to relate between the table and the button.
I try to use JavaScript but i should think about a function and I don't found any of it to apply at type table. Thinking about CSS still also hard since I cannot find a relation between the table and the button.
A plain, non-jquery equivalent of Lance May's answer would be something like this:
var button = document.getElementById('the-button');
if (document.getElementById('the-table').getElementsByTagName('tr').length > 0){
button.style.display = 'block';
}else{
button.style.display = 'none';
}
You'll need to toggle the visibility of the button when the table is adjusted. Since that can be done in many ways, there's not way to know what is right for you.
For simplicity, give jQuery a try. I will make accessing the elements and modifying the styles much easier than 'vanilla' JavaScript. Also be sure that if you're updating the table after page load (via JavaScript), that you use this whenever you do that.
$(document).ready(function(){
if ($("#table > tr").length > 0)
$("#button").show();
else
$("#button").hide();
});
I hope that helps.
If the Button lies inside a TD which it most def. does then simply access it via:
td input {
display: none;
}
You even can define the stlye with a advanced selector like this in CSS3
input[type="button"] {
display: none;
}
I wrote about this at my blog.
With JavaScript you can grab the input field with
var myInput = document.getElementsByTagName('input');
myInput.style.display = none;
To select your input inside a tr, use something like
myTableRow.childNodes[0];
<html>
<head>
<title>whatever</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var $t = $('table');
var $h = $t.find('thead');
var $b = $t.find('tbody');
var $s = $('#send');
// the "add" button appends a new row
// into the table body; if the body
// transitions from empty, the "send"
// button is displayed
$('#add').bind('click', function ()
{
$b.append(newRow());
if (1 == $b.find('tr').length)
$s.removeClass('hidden');
});
// the remove button removes the last
// row from the table body (if there's
// any); if the body transitions to
// empty, the "send" button is hidden
$('#remove').bind('click', function ()
{
$b.find('tr:last').remove();
if (0 == $b.find('tr').length)
$s.addClass('hidden');
});
// generates a table row; this demo
// impl. just copies the heading row
var newRow = function ()
{
return $h.find('tr').clone();
};
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr><td>foo</td><td>bar</td></tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" id="add" value="add" />
<input type="button" id="remove" value="remove" />
<input type="button" id="send" value="send" class="hidden" />
</body>
</html>