Get <tr> items form a Table - javascript

I Have this table:
<table class="table table-hover">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Type</th>
<th>Phone</th>
<th>S.N.</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr style="cursor:pointer" onclick="mandaDetalle(this.id)">
<td>PE-6</td>
<td>John Smith</td>
<td>GT5</td>
<td>845254585</td>
<td>56456456456</td>
<td>14/07/2017</td>
</tr>
</tbody>
</table>
How Can I send onclick that <tr> element with the items into a javascript (or jquery) function, I already sending the id of that one <tr> but I need to send the items as well, because I need to manipulate them, I need to store each <th> into a variable, so I can use them later.

you can do it like this:
(1) Add an id attribute to your row
(2) Attach an onclick event listener to the row found by the id set previously
(3) Look at the event.target to get the clicked table cell
(Simplified) HTML:
<table>
<tr id="row">
<td>
first cell
</td>
<td>
second cell
</td>
</tr>
</table>
JavaScript
function onRowClick(event) {
console.log(event.target);
}
document.getElementById('row').addEventListener('click', onRowClick);
Here's the JSFiddle for a demo. (make sure to open your web console)

Related

Table <tr> appending again and again

I'm creating <tr> dynamically and append this tr to <tbody> with jquery append method.
The <table> is created inside modal whenever I open modal without refreshing the page the same <tr> appending again and again to the old <tr>.
TABLE inside modal
<table class="table table-bordered tablesorter" id="work_aval">
<thead>
<tr>
<th rowspan="1" colspan="8" class="text-center"></th>
</tr>
<tr>
<th rowspan="1" colspan="8" class="text-center">It is necessary to have some element of weekend availability. If you tick the weekends this could be applied as alternate as well
</th>
</tr>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
AJAX call for <tr> append
$("#work_aval tbody").append(response.availability);
Can you please try html() instead of append() method?
Ex:
$("#work_aval tbody").html(response.availability);
$('#work_aval tbody').empty();
This line works for me.
Thanks

Using Cheerio to extract data from a page.. The format is as below. How do I parse these tables dynamically as they can vary?

I hope someone smart can help me get my head around all this arrays and objects and loops.....I've been coming across them alot and I just dont get why there isnt an easy way for me to select on the DOM what I want to scrape and then say export to JS variable as JSON object.
All I am trying to do here is export to a JSON string in this format.
Created th : Created td
Client th : Client td
Owner th : Owner td
Thats what is extract from table ONE
Table TWO is more complicated:
there can be unlimited trs here......this is where I need a loop to ensure all of the text content is put from JS into JSON.
Title th
Content th
Statement th:
Date Description Cost Payment Balance.....all of these rows here can be unlimited.
th and tds are clear but there can be unlimited number of trs
Each title has a content (for Content value just join all the values in the divs).
Each title also has a statement which can have multiple rows. Its variable.
So columns in the table and in the page wont change but the rows for the second table and the mini statement can change. The data in the first table is static.
I hope could this of a quick loop to parse this into a JSON object so I can post to my DB?
<table class="summary">
<tbody><tr>
<th>Created</th>
<th>Client</th>
<th>Owner</th>
<th>Ref</th>
<th>Email Address</th>
<th>Postal Address</th>
</tr>
<tr>
<td>Created</td>
<td>Client</td>
<td>Owner</td>
<td>Ref</td>
<td>Email</td>
<td>Postal Address</td>
</tr>
</tbody></table>
<hr>
<table>
<tbody><tr>
<th>Title</th>
<th>Content</th>
<th>Statement</th>
</tr>
<tr>
<td>
<div>
<a class="packageTitle" onclick="openPackageDetail("")" title="Click for detail">{TITLE}</a>
</div>
</td>
<td>
<div>
<div>
{CONTENT1}
</div>
<div class="lighter smaller">Containing:</div>
<div>
<div class="smaller">
Early Bird Guest (1)
</div>
</div>
</div>
</td>
<td>
<table class="smaller statement">
<tbody><tr>
<th>Date</th>
<th>Description</th>
<th style="padding-right:1em">Cost</th>
<th style="padding-right:1em">Payment</th>
<th>Balance</th>
</tr>
<tr>
<td>dATE AND TIME</td>
<td>DESCRIPTION</td>
<td>COST</td>
<td>PAYMENT</td>
<td>BALANCE</td>
</tr>
<tr>
<td>DATE</td>
<td>DESCRIPTION</td>
<td>COST</td>
<td>PAYMENT</td>
<td>BALANCE</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>

Detect TD editable change and change css colour [duplicate]

This question already has answers here:
contenteditable change events
(21 answers)
Closed 4 years ago.
this seems pretty simple but I cannot figure out a solution for it.
I have an HTML table such as
$('#result_table td').on('change', function() {
console.log("Row Changed!")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="result_table" class="table table-hover">
<thead>
<tr>
<th>Blah</th>
<th>Error</th>
</tr>
</thead>
<tbody>
<tr>
<td>bleh</td>
<td>False</td>
</tr>
<!-- If Error, make it editable but highlight row red-->
<tr bgcolor="#FF9494">
<td contenteditable="true">blah_error</td>
<td contenteditable="true">True</td>
</tr>
</tbody>
</table>
What I am trying to do is if you click and edit the editable content, change the table row background colour to a different colour. I'm just stuck with trying to figure out the jQuery.
use the blur event on the td, as soon as you leave the cell it will trigger your event
$('#result_table td').on('blur', function() {
console.log("Row Changed!")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="result_table" class="table table-hover">
<thead>
<tr>
<th>Blah</th>
<th>Error</th>
</tr>
</thead>
<tbody>
<tr>
<td>bleh</td>
<td>False</td>
</tr>
<!-- If Error, make it editable but highlight row red-->
<tr bgcolor="#FF9494">
<td contenteditable="true">blah_error</td>
<td contenteditable="true">True</td>
</tr>
</tbody>
</table>

table content editable event

Is there an event on table row content editable to get the value once the user press enter or the focus on edited cell has been loose. I'm just wondering if the user can modify on cell as much as he want and when he is done there is something like a button that apply the changes and do the one time update query on the table.
Currently I have table like this:
<table class="sortable" border="1" id="myTable" >
<thead>
<tr>
<th>ID No</th>
<th>Sec ID</th>
<th>Employee</th>
<th>Dept</th>
<th>Code</th>
<th>Train</th>
<th>Cert</th>
<th>Prog</th>
<th>Date</th>
</tr>
</thead>
<tbody>
#foreach (var item in details)
{
<tr>
<td>#item.ID</td>
<td contenteditable='true' bgcolor="#F0F0F0">#item.secID</td>
<td>#item.name </td>
<td>#item.dept </td>
<td contenteditable='true' bgcolor="#F0F0F0">#item.Code </td>
<td contenteditable='true' bgcolor="#F0F0F0">#item.train </td>
<td contenteditable='true' bgcolor="#F0F0F0">#item.cert </td>
<td contenteditable='true' bgcolor="#F0F0F0">#item.prog </td>
<td>#item.date </td>
</tr>
}
</tbody>
</table>
I just want to collect the edited rows and store it on variable or list and pass it to my update query via ajax.
Any suggestions/comments TIA.
You could just use this on change event handler:
document.getElementById("myTable").addEventListener("change", function(event) {
//do whatever
})

How can I use ng-repeat in a table body to encompass multiple rows?

I'm trying to transition from jsRender to AngularJs and can't seem to figure out how to generate multiple table rows with ng-repeat.
I need to generate two table rows per ng-repeat, these rows are related to each other. The second row is actually a hidden row that expands out like an accordion. This works perfectly fine with renderJs:
With renderJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
{{for myArray}} <!-- Creates two rows per item in array -->
<tr>
<td>{{data}}</td>
<td>{{data2}}</td>
</tr>
<tr class="special-row">
<td>{{otherData}}</td>
<td>{{otherData2}}</td>
</tr>
{{/for}}
</tbody>
</table>
With AngularJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<div ng-repeat="element in myArray"> <!-- This gets removed since it's not a valid element for a table body -->
<tr>
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</div>
</tbody>
</table>
I cannot have a <div> inside of my table body to put the ng-repeat on. How can I do this?
You should do it like this
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="element in myArray">
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr ng-repeat-end class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</tbody>
https://jsfiddle.net/feq6pe7m/1/
<body ng-app="SampleApp">
<table ng-controller="fcController" border="1px">
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody ng-repeat="element in myArray">
<tr>
<td>{{element .Data1}}</td>
<td>{{element .Data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.OtherData1}}</td>
<td>{{element.OtherData2}}</td>
</tr>
</tbody>
</table>
</body>

Categories