I'm trying to delete a specific row from a table using javascript. The way I'm trying to do it now, is by retrieving the ID of the current row by clicking a button (the delete button) and then deleting the row. The problem is that I'm not retrieving the current row ID in the table. If someone could help me retrieve the the ID of the current row when the user clicks the delete button, I think I can solve the rest myself. Thanks
/*The Javascript*/
function delete_row() {
alert('id goes here');
//getElementById('row').innerHTML ='hello';
//id.deleteRow();
//var table = document.getElementByTagName('items_table');
//var row = table.rows[index];
//document.getElementByTagName('items_table').deleteRow(0);
}
/*The HTML of the Table*/
<table id="items_table">
<tr id="row_1">
<td>
<input type="text" value="item1"/>
</td>
<td>
<button onclick="delete_row();">X</button>
</td>
</tr>
/* Five rows in this table... */
<tr id="row_5">
<td>
<input type="text" value="item5"/>
</td>
<td>
<button onclick="delete_row();">X</button>
</td>
</tr>
</table>
You could just ascend the tree until you find a row:
function delete_row(btn) {
var tr = btn;
while(tr && tr.nodeName != "TR") tr = tr.parentNode;
if( !tr) throw new Error("Failed to find the row, was the function called correctly?");
tr.parentNode.removeChild(tr); // delete it
}
And:
<button onClick="delete_row(this);">X</button>
The this is important, as it provides a reference to the button that was clicked, so we can find the row it is in.
Check this code. It has been verified and will do your job perfectly. :)
<script>
function delete_row(me) {
alert(me.parentNode.parentNode.id);
}
</script>
<table id="items_table">
<tr id="row_1">
<td>
<input type="text" value="item1"/>
</td>
<td>
<button onclick="delete_row(this);">X</button>
</td>
</tr>
<tr id="row_5">
<td>
<input type="text" value="item5"/>
</td>
<td>
<button onclick="delete_row(this);">X</button>
</td>
</tr>
</table>
Can't you just change <button onclick="delete_row();">X</button> to <button onclick="delete_row('row_5');">X</button>, in each row, respectively?
Your handler would look like:
function delete_row(theID) {
alert(theID);
}
Related
I have a table that has 10 rows and 3 columns and each row has a checkbox associated with it. The user can select any number of rows and when he presses the Submit button an alert message needs to be displayed containing the values in all the selected rows preferably as a JSON string. How do I extract all the selected rows alone and convert it to a JSON string using either Javascript or Jquery?
I hope I've understood your requirements well. Please consider this solution.
$('#btn-table-rows').click(function (event) {
var values = [];
$('table #row-selector:checked').each(function () {
var rowValue = $(this).closest('tr').find('td.row-value').text();
values.push(rowValue)
});
var json = JSON.stringify(values);
alert(json);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>
<input id="row-selector" type="checkbox"/>
</td>
<td class="row-value">Row #1: Hello</td>
</tr>
<tr>
<td>
<input id="row-selector" type="checkbox"/>
</td>
<td class="row-value">Row #2: World</td>
</tr>
</table>
<button id="btn-table-rows">Process</button>
I am making a page that contains a table with a button to add a row. It is a table for users to input data, and will eventually be submitted to a database.
Currently, I have a price and a quantity field in each row. When either of them change, I want to calculate the total and write it to another cell.
This is my event handler (wrapped in $(document).ready()):
$(".quantity_input, .price_input").change(function () {
console.log(this.value);
cal_total();
});
This is my current code:
function cal_total() {
if (isNaN(parseFloat(this.value))) {
alert("You must enter a numeric value.");
this.value = "";
return;
}
var cell = this.parentNode;
var row = cell.parentNode;
var total = parseFloat($("#items_table tr").eq(row.index).find("td").eq(3).find("input").first().val()) * parseFloat($("#items_table tr").eq(row.index).find("td").eq(4).find("input").first().val());
if (!isNaN(total)) {
$("#items_table tr").eq(row.index).find("td").eq(5).html(total.toFixed(2));
}
}
And this is what the inputs look like:
<input type='text' class='fancy_form quantity_input' name='quantities[]' size='4' style='text-align:center;border-bottom:none;'>
In addition to my original question, the event is never fired. Can anyone see why?
But more importantly, is this the best way to retrieve the values? I really don't think so but I cant come up with anything more clever.
Thank you!
you have to pass paremeter to calc_total to define input or tr
try this code
$(".quantity_input, .price_input").change(function () {
$(".quantity_input, .price_input").change(function () {
cal_total(this);
});
});
function cal_total(elem){
var row=$(elem).closest("tr")
var quantity=row.find(".quantity_input").val()-0
var price=row.find(".price_input").val()-0
var total=quantity * price
row.find(".totl_input").val(total)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
</table>
I have buttons in a table which are created dynamically. I want to iterate through a table, get the tablerows which contain a checked checkbox and get the value of a button inside the tablerow. I want to push the values in an array after. The buttons don't have a unique ID so I cannot get their values by id.
I tried to get the values through giving the buttons a class and itering works fine but the array is filled with empty entries.
$("#bt_multiple_deletion").off().on("click", function () {
var files = [];
var rows = $(".select").find("input[type=checkbox]:checked");
rows.each(function () {
files.push($(this).find(".filefolder-button").text());
});
})
I really don't know what Im doing wrong. I tried to get the values with .text(), .val() etc.
My table row looks like this:
<tr class="select">
<td>
<span class="countEntries"><input id="lv_fifo_ctrl7_cb_delete_file" type="checkbox" name="lv_fifo$ctrl7$cb_delete_file" /></span>
</td>
<td>
<img src="images/icons/013_document_02_rgb.png" alt="document" />
</td>
<td class="name">//the button i want to get the value from
<input type="submit" name="lv_fifo$ctrl7$bt_file" value="013_document_png.zip" id="lv_fifo_ctrl7_bt_file" class="filefolder-button download file del" style="vertical-align: central" />
</td>
<td>
<span id="lv_fifo_ctrl7_lb_length">33.14 KB</span>
</td>
<td>
<span id="lv_fifo_ctrl7_lb_CreationTime">21.10.2014 07:34:46</span>
</td>
<td></td>
<td>
<input type="submit" name="lv_fifo$ctrl7$bt_del_file" value="delete" id="lv_fifo_ctrl7_bt_del_file" class="delete-button delete-file" />
</td>
</tr>
The problem is rows is the input elements not the tr elements so in the loop you need to find the tr which contains the input then find the target element inside it
$("#bt_multiple_deletion").off().on("click", function () {
var checked = $(".select").find("input[type=checkbox]:checked");
var files = checked.map(function () {
return $(this).closest('tr').find(".filefolder-button").val();
}).get();
})
Another option is
$("#bt_multiple_deletion").off().on("click", function () {
var rows = $(".select").find("tr").has('input[type=checkbox]:checked');
//var rows = $(".select").find('input[type=checkbox]:checked').closest('tr');
var files = rows.map(function () {
return $(this).find(".filefolder-button").val();
}).get();
})
#Timo Jokinen Do you need this
$("#bt_multiple_deletion").on("click", function () {
var files = [];
var rows = $(".select").find("input[type=checkbox]:checked");
rows.each(function () {
files.push($(this).parents("tr").find("td.filefolder-button").text());
});
console.log(files);
})
<table class="select">
<tr>
<td class="filefolder-button">test1</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td class="filefolder-button">test2</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td class="filefolder-button">test3</td>
<td><input type="checkbox" /></td>
</tr>
</table>
<button id="bt_multiple_deletion">delete</button>
Checkout example link here
I am reading tables tr id with closest attribute on change but I keep getting wrong values and do not know how to fix.
If I choose the firts the "lower"(16) checkbox, I get the tr id ok and after that the upper one everythins peachy. Now if I do it the other way around I keep only getting the value of the "top"(17) one. My guess is that it is because the class name is the same, but I´m not sure and I can not influence the class name, since it is generated by Datatables.
Could someone take a peek at jquery and tell me what I´m doing wrong.
Thank you for your help.
var a = $(".report_report").change(function() {
var closestTr = $('.report_report:checkbox:checked').closest('tr').attr('id');
alert(closestTr);
This the basic table concept
<table class="something">
<tr id = "17">
<td>
<input class="report_report" type = "checkbox">
</td>
</tr>
<tr id = "16">
<td>
<input class="report_report" type = "checkbox">
</td>
</tr>
</table>
try
HTML
<table class="something">
<tr id="17">
<td>
<input class="report_report" type="checkbox"/>
</td>
</tr>
<tr id="16">
<td>
<input class="report_report" type="checkbox"/>
</td>
</tr>
</table>
JS
$(".report_report").change(function() {
alert($(this).closest("tr").attr("id"));
});
DEMO
IF you want all selected check box with parent tr id
$(".report_report").change(function () {
var cheked = $(".report_report").filter(function () {
return this.checked;
}).closest("tr").get();
console.log(cheked);
});
NOTE: you html is invalid tr is not closed
I have a pretty basic table at the moment:
I need to be able to only hightlight one row in each column, and deselect whatever was selected before it..
I understand I'm going to need a CSS class, e.g.
.hightlighted {
background: #f00;
color: #fff;
}
The HTML in the view is pretty basic also:
<tbody>
<tr>
<td> </td>
<td>Differdange</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Dippach</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Dudelange</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Echternach</td>
<td></td>
</tr>
<tr>
<td> </td>
<td>Erpelscheid</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Esch-sur-Alzette</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Esch-sur-Sûre</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Ettelbruck</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Feulen</td>
<td> </td>
</tr>
</tbody
But I don't know whether it's appropriate to highlight/unhighlight rows in CSS if I am going to be needing to 'grab' the selected data from the rows when the table is completed by the user?
Can anyone suggest what I should use (JQuery, Javascript, CSS) to highlight a row in a column so that I can get the data later?
EDIT
Now I've got the highlighting sorted, the only problem I'm having is differentiating between columns so that instead of this (which I'm getting atm)
I want each columns to be able to have it's own unique row highlighted (e.g. Differdange could be highlighted, as well as dddd on Localities)
Any way to edit the
$("tr").click(function() {
$("tr").removeClass("highlighted");
$(this).addClass("highlighted");
});
code to do this? Thanks
You can use the .removeClass() and .addClass() jQuery methods to achieve this. Here's a little demo: little link. The code is pretty self-explaining, but here's a commented version of the JavaScript part:
var chosen = []; //an array to save the chosen row for each column
$("td").click(function() { //when a td is clicked
var idx = $(this).index() + 1; //get column of current cell
$("td:nth-child(" + idx + ")").removeClass("highlighted"); //unhighlight all cells in column
$(this).addClass("highlighted"); //highlight this one
chosen[idx] = $(this).parent("tr").index(); //and save it as chosen in its column
});
............................
Demo
Hi now you can do this jquery as like this
Css
.hightlighted{
background: #f00;
color: #fff;
}
jquery
$("tr").click(function(){
$("tr").removeClass('hightlighted')
$(this).addClass('hightlighted');
});
Could you be more precise on when and how the selection should be made? I'm guessing you want the user to click on a row, which then gets highlighted. In that case you'd want to create a highlight class in css, add it to the row the user clicked on and later you can get the row cia its class:
tr.highlighted td {
background: #f0;
color: #fff;
}
And in the javascript:
// catch click event
$('tr').click(function (e) {
// remove prvious selection
$('tr.highlighted').removeClass('highlighted');
// make this row selected
$(e.currentTarget).addClass('highlighted');
});
// get current selection
function getSelected () {
return $('tr.highlighted');
}