I have a database table that I'm outputting onto a internal webpage. I need to find the value of a selected row so I can then merge the rows and send the value back to the db so it knows which rows to merge.
When clicking on a button to merge rows this is my function I have created:
//merge the rows now
function mergeTheRows() {
//get value from each row
$("#mergeRowsBody tr").each(function() {
rowValue = document.getElementsByTagName("tr").value;
mergeRowsArray.push(rowValue);
console.log(mergeRowsArray);
});
}
Here is the body of the table (I'm only showing two rows for the example):
<tbody id="mergeRowsBody">
<tr class="rowEditData odd mergeSelect" value="110461" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">ABBEVILLE</td>
<td class="mdl-data-table__cell--non-numeric">South Carolina</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">001</td>
<td class="mdl-data-table__cell--non-numeric">39</td>
</tr>
<tr class="rowEditData even mergeSelect" value="107045" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Abbeville County</td>
<td class="mdl-data-table__cell--non-numeric">South Carolina</td>
<td class="mdl-data-table__cell--non-numeric">001</td>
<td class="mdl-data-table__cell--non-numeric">45</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
</tbody>
I keep getting undefined when it console logs to the browser. I've tried finding the value by ID and class as well, but it keeps saying undefined. What am I doing wrong?
All I need is to be able to save the ID of the row so I can then let the database know which rows will be merged.
You should use data- property instead of value, value is for inputs, selects... Also you need to add table in your html and then you can use map() and get() to return array of data-values.
var mergeRowsArray = $("#mergeRowsBody tr").map(function() {
return $(this).data('value')
}).get();
console.log(mergeRowsArray)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id="mergeRowsBody">
<tr class="rowEditData odd mergeSelect" data-value="110461" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">ABBEVILLE</td>
<td class="mdl-data-table__cell--non-numeric">South Carolina</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">001</td>
<td class="mdl-data-table__cell--non-numeric">39</td>
</tr>
<tr class="rowEditData even mergeSelect" data-value="107045" role="row">
<td class="mdl-data-table__cell--non-numeric sorting_1">Abbeville County</td>
<td class="mdl-data-table__cell--non-numeric">South Carolina</td>
<td class="mdl-data-table__cell--non-numeric">001</td>
<td class="mdl-data-table__cell--non-numeric">45</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
<td class="mdl-data-table__cell--non-numeric">null</td>
</tr>
</tbody>
</table>
getElementsByTagName returns a live HTMLCollection of elements with the given tag name.
rowValue = document.getElementsByTagName("tr").value;
replace with
rowValue =$(this).attr("value");
Have you tried using just jQuery?
rowValue = $(".mergeSelect").val();
Related
I have a table on a web page, I am trying to add multiple rows after first, second or third row dynamically.
<table class="sort-table">
<tr>
<th>State Owner</th>
<th>Number of Orders</th>
<th>Commission Total</th>
</tr>
<tr>
<td class="so_details" data-name="Adam Howard" data-soid="2"><a class="so_link">Adam Howard</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr class="dashed-top">
<td class="total" colspan="2">Total</td>
<td class="currency align-right total">0.00</td>
</tr>
</table>
I have created some new tr elements dynamically. following is the html
<tr>
<td>ID1000</td>
<td class="op_details" data-name="Adam Howard" data-opid="ID1000"><a class="op_link">Adam Howard</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr>
<td>ID06</td>
<td class="op_details" data-name="Cory McEwen" data-opid="ID06"><a class="op_link">Cory McEwen</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr class="dashed-top">
<td class="total" colspan="3">Total</td>
<td class="currency align-right total">0.00</td>
</tr>
I want to insert the newly generated HTML tr elements after the first row or second or third etc.
I also want to adjust four td elements in newly created tr under the three td elements of a specific tr. as you can see in the code.
I have tried
let html = `<tr>
<td>ID1000</td>
<td class="op_details" data-name="Adam Howard" data-opid="ID1000"><a class="op_link">Adam Howard</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr>
<td>ID06</td>
<td class="op_details" data-name="Cory McEwen" data-opid="ID06"><a class="op_link">Cory McEwen</a></td>
<td class="align-center">0</td>
<td class="currency align-right">0.00</td>
</tr>
<tr class="dashed-top">
<td class="total" colspan="3">Total</td>
<td class="currency align-right total">0.00</td>
</tr>`
(html).insertAfter($(this).closest('tr'));
//$('.sort-table > tbody > tr').eq(1).after(html);
But nothing happened to dom and it remains unchanged. Please help me in this regard.
JQuery insertAfter() or insertBefore() function can do your job.
insertAfter() // inserts after a selected element
insertBefore() // inserts before a selected element
syntax
$("Your html goes here").insertAfter($('yourtable selector tr:eq(row
index after which you want to insert the html)'));
Here is an example.
<table class="sort-table">
<tr> <td> 1 </td> </tr>
<tr> <td> 2 </td> </tr>
<tr> <td> 3 </td> </tr>
<tr> <td> 4 </td> </tr>
<tr> <td> 5 </td> </tr>
<tr> <td> 6 </td> </tr>
</table>
Now Javascript
var dynamicRow = `<tr>
<td>will insert after first row </td>
</tr>`;
$(dynamicRow).insertAfter($(".sort-table tr:eq(0)")); // 0th index is first-row
// The above 0th index using eq(0) can also be achieved using first-child pseudo selector
$(dynamicRow).insertAfter($(".sort-table tr:first-child"))
// if you want to insert after last row
dynamicRow = `<tr>
<td>will insert after last row </td>
</tr>`;
$(dynamicRow).insertAfter($(".sort-table tr:last-child"));
Note: to give the row index in tr:eq(rowindex), always remember that
it starts from 0 not 1. so
:eq(0) means first-row
:eq(1) means second-row
:eq(9) means (9+1) = 10th row
I have a table structure like:
<table id='myTable'>
<thead>
<tr>
<th class='name'>Name</th>
<th class='nick-name'>Nick Name</th>
<th class='age'>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class='name'>Ilona</td>
<td class='nick-name'>Baby Doll</td>
<td class='age'>21</td>
</tr>
<tr>
<td class='name'>Sieraa</td>
<td class='nick-name'></td>
<td class='age'>24</td>
</tr>
<tr>
<td class='name'>Britney</td>
<td class='nick-name'>Blondie</td>
<td class='age'>27</td>
</tr>
<tr>
<td class='name'>Kate</td>
<td class='nick-name'>Night Queen</td>
<td class='age'>19</td>
</tr>
<tr>
<td class='name'>Dani</td>
<td class='nick-name'></td>
<td class='age'>23</td>
</tr>
<tr>
<td class='name'>Aliee</td>
<td class='nick-name'></td>
<td class='age'>26</td>
</tr>
<tr>
<td class='name'>Brandi</td>
<td class='nick-name'></td>
<td class='age'>27</td>
</tr>
</tbody>
</table>
As some Nick Name fields are empty, I want to display the value of Name in Nick Name if they are empty.
Eg: In Second Row of Table Body, The Nick Name field is empty, The Name field contains Sierra. So, I want to display Sierra in Nick Name field instead of leaving it empty.
How can I achieve this using jQuery or JavaScript
jQuery:
this only works when the .name is always the exact previous element of .nick-name like in your structure
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
$(this).text($(this).prev().text());
}
});
This works when both .name and .nick-name have the same parent
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
var name = $(this).parent().find('.name').text();
$(this).text(name);
}
});
You should read up on DOM Traversing with jQuery, there is lots of stuff you can do to get to your elements.
jsfiddle: http://jsfiddle.net/sX4yj/
This should help
$('#myTable tr').each(function(){
var nickname = $(this).find('.nick-name').html();
alert(nickname);
});
Refer: How to get a table cell value using jQuery?
This is my html table
<table>
<thead>
<tr>
<td class="td20"><h3>Patient Name</h3></td>
<td class="td20"><h3>Summary</h3></td>
<td class="td20"> <h3>Created</h3></td>
<td class="td20"><h3>Last visit</h3></td>
<td class="td20"> <h3>Refer to a Doctor</h3></td>
</tr>
</thead>
<tbody id="patient_table">
<tr id="1">
<td class="td20">Patient Name</td>
<td class="td20">Summary</td>
<td class="td20">Created</td>
<td class="td20">Last visit</td>
<td class="td20">Refer to a Doctor</td>
</tr>
<tr id="2">
<td class="td20">Patient Name</td>
<td class="td20">Summary</td>
<td class="td20">Created</td>
<td class="td20">Last visit</td>
<td class="td20">Refer to a Doctor</td>
</tr>
</tbody>
</table>
This is my script:
$("#patient_table").click(function(e) {
var id = $(this).children('tr').attr('id');
alert(id);
});
The <tr> is generated dynamically inside the <tbody>.
I need to find the id of <tr> on click of <tr> itself.
With the script I'm always getting the first <tr> id only irrespective of the second <tr> click.
Use this instead:
$("#patient_table").on('click','td',function (e) {
var id = $(this).closest('tr').attr('id');
alert(id);
});
jsFiddle example
Since you mentioned the rows being generated dynamically you want to use .on() to delegate the event handling to the table cells.
Using
var row = table.insertRow(id);
how can I specify that the new row goes under the used chosen ID, rather than a hardcoded index or at the end of the table? I have a drop down that has different options of what row id to place your new row under. The drop down options have matching ids to the related rows. Thanks. Here is my table, I want the new row go go under the user selected father (father3, father4, or father5)
<table id="shore_tab" border="1">
<tr class="row_blue_bold father" id="father3">
<td colspan="2" class="father_header">Category 3</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son3">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father3, category 3)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold father" id="father4">
<td colspan="2" class="father_header">Category 4</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
<tr class="row_blue_bold son4">
<td class="cell_20 cell_no_bkg"> </td>
<td class="cell_190">(information for father4, category 4)</td>
<td class="cell_50"> </td>
</tr>
</table>
You can use the id to get the index
var row = table.insertRow(document.getElementById(id).rowIndex+1);//+1 to be inserted under
id should be index, that is: table.rows is like an Array (it's not actually an Array, but behaves like one).
I have the following table dynamically generated. Number of columns is dynamic and is between 4-12 based on user selection.
<table>
<tr>
<th class="roleComparethead">Function</th>
<th class="roleComparethead"">Type</th>
<th class="roleComparethead">1111</th>
<th class="roleComparethead">222</th>
<th class="roleComparethead">555</th>
</tr>
<tr class="cRow">
<td class="roleComparethead"> Profiles Maintenance</td>
<td class="type"> Internal </td>
<td class="access"><span class="accessLevel">Update</span></td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">NoAccess</span> </td>
</tr>
<tr class="cRow">
<td class="roleComparethead"> Profiles Maintenance</td>
<td class="type""> Internal </td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">Read</span></td>
<td class="access"><span class="accessLevel">Read</span> </td>
</tr>
I want to hide rows in the table if values of all cells with class="accessLevel" in that row are same and display only if the values are different. How do i achieve this using jQuery or Javascript?
Thank you.
You can try this solution
http://jsfiddle.net/mjaric/aLWVM/
It can be done in less lines, but I in purpose split it to more. Check it out and let me know if behaviour is correct.