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
})
Related
I'm trying to make a live NBA scores website using HTML, CSS, and JS.
I'm having trouble adding a inner tr under the game scores.
Here's what my table currently looks like:
Here's my current code JS and HTML:
(My current JS is building up the table and using innerHTML to modify the table under the tableData id)
else{
data += `<tr>
<td class = "left">${item.team1} <img src=${item.team1Img}></td>
<td> ${item.score1} </td>
<td> ${item.score2} </td>
<td class="right"><img src=${item.team2Img}> ${item.team2}</td>
</tr>
<tr>
<td colspan="2">${period}QR</td>
</tr>`;
}
<table>
<thead>
<tr>
<th style="width:40%; text-align:right;">Home</th>
<th style="width:10%;" colspan="2">Scores</th>
<th style="width:40%; text-align: left">Away</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
Here's what I want it to look like (although centered better) and the code I used to build the example:
<table>
<thead>
<tr>
<th width= 40% text-align= right;>Home</th>
<th width= 20%; colspan= "2">Scores</th>
<th width= 40%; text-align= left;>Away</th>
</tr>
</thead>
<tbody id="tableData">
<tr>
<td rowspan="2">Celtics<img src=${item.team1Img}></td>
<td>50</td>
<td>65</td>
<td rowspan="2"><img src=${item.team2Img}>Washington Wizards</td>
</tr>
<tr>
<td colspan="2">3QR</td>
</tr>
</tbody>
</table>
Basically, I'd like the "4QR" to be directly under the scores and still on the same row as the team names.
Thanks in advance!
In your javascript template literal, you forgot to put the rowspan="2" and it's caused everything to shift over.
data += `<tr>
<td class = "left" rowspan="2">${item.team1} <img src=${item.team1Img}></td>
<td> ${item.score1} </td>
<td> ${item.score2} </td>
<td class="right" rowspan="2"><img src=${item.team2Img}> ${item.team2}</td>
</tr>
<tr>
<td colspan="2">${period}QR</td>
</tr>`;
You'll notice your table as constructed is missing 2 cells. Once you "add" those two cells in with the "rowspan", it will all fit back into place.
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>
I need to check all other cells in a table row to have a cell (there's a cell for each row, not one single cell) display either "entry missing" or "complete" automatically. Currently, I'm only able to make it work properly for the first row since I can only have it check the cells in the first row.
I've tried having the code iterate through the table, checking values of cells in the row with if statements and then either with the (this) function or using a ('#tdID') format.
I haven't been able to check any cell values in rows below the first when I don't use (this), but as far as I can tell, (this) only refers to the #DataEntryStatus id since it starts the function in the first line. Basically, I need something that works like (this) but with #Tool, #CutRef, and more td IDs.
$('#table_id #DataEntryStatus').each(function(){
if($('#Tool').text() =="")$(this).text("Entry missing");
else if($('#CutRef').text() =="")$(this).text("Entry missing");
else($(this).text("Complete"));
if($(this).text().toLowerCase() =="entry missing")$(this).css('background-color','#fcc');
if($(this).text().toLowerCase() =="complete")$(this).css('background-color','#af0');
});
And here is the table where the ids come from
<table class="table" id="table_id">
<tr>
<th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
<th style="vertical-align:bottom;">Data Entry Status</th>
<th style="vertical-align:bottom;">Tool</th>
<th style="vertical-align:bottom;">Cut Ref</th>
<th style="vertical-align:bottom;">Date</th>
<th style="vertical-align:bottom;">Coupon</th>
<th style="vertical-align:bottom;">Row</th>
<th style="vertical-align:bottom;">Axial</th>
<th style="vertical-align:bottom;">Ox Pocket</th>
<th style="vertical-align:bottom;">SM Pocket</th>
<th style="vertical-align:bottom;">Tray #</th>
<th style="vertical-align:bottom;">Angle</th>
<th style="vertical-align:bottom;">Probe</th>
</tr>
<tbody id="myTable">
{% for item in items %}
<tr>
<td>
Edit
! X !
</td>
<td id="DataEntryStatus"><div>{{ item.DataEntryStatus }}</div></td>
<td id="Tool"><div>{{ item.Tool }}</div></td>
<td id="CutRef"><div>{{ item.CutRef }}</div></td>
<td id="CutDate"><div>{{ item.CutDate }}</div></td>
<td id="Coupon"><div>{{ item.Coupon }}</div></td>
<td id="Row"><div>{{ item.Row }}</div></td>
<td id="Axial"><div>{{ item.Axial }}</div></td>
<td id="OxPocket"><div>{{ item.OxPocket }}</div></td>
<td id="SmPocket"><div>{{ item.SmPocket }}</div></td>
<td id="TrayNum"><div>{{ item.TrayNum }}</div></td>
<td id="Angle"><div>{{ item.Angle }}</div></td>
<td id="Probe"><div>{{ item.Probe }}</div></td>
</tr>
{% endfor %}
</tbody>
</table>
I want it to check each row individually and identify which rows are filled with values and which aren't, but currently it only checks the cells of the first row and prints the same output for every status cell in later rows.
You can iterate each tr in the table directly and then every cell. Reference for the :gt pseudo selector
// Check each row in table
$('#table_id tbody tr').each(function() {
$row = $(this)
$status = $row.find('#DataEntryStatus');
// Iterate every cell, but skip the first two in each row
// (action and status cell). Be sure to update this value if you change
// the table structure
$row.find('td:gt(1) div').each(function() {
$status.text("Complete").css('background-color', '#af0');
if ($(this).text() == "") {
$status.text("Entry missing").css('background-color', '#fcc');
// The row is invalid, break from the each()
return false;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="table_id">
<tr>
<th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
<th style="vertical-align:bottom;">Data Entry Status</th>
<th style="vertical-align:bottom;">Tool</th>
<th style="vertical-align:bottom;">Cut Ref</th>
<!-- Simplified for convenience -->
</tr>
<tbody id="myTable">
<tr>
<td>
Edit
! X !
</td>
<td id="DataEntryStatus">
<div>DataEntryStatus</div>
</td>
<td id="Tool">
<div></div>
</td>
<td id="CutRef">
<div>CutRef 1</div>
</td>
<!-- Simplified for convenience -->
</tr>
<tr>
<td>
Edit
! X !
</td>
<td id="DataEntryStatus">
<div>DataEntryStatus 2</div>
</td>
<td id="Tool">
<div>Tool 2</div>
</td>
<td id="CutRef">
<div>CutRef 2</div>
</td>
<!-- Simplified for convenience -->
</tr>
</tbody>
</table>
You can try this, Here I am getting each row, Then getting each cell/column of that row, Then checking for empty....
You can replace with any value in if instead of empty...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='myTable' border>
<tr>
<td>
Row1 Col1
</td>
<td>
Row1 Col2
</td>
</tr>
<tr>
<td>
Row2 Col1
</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
Row3 Col2
</td>
</tr>
</table>
<script>
$("#myTable tr").each(function(rowNum,row){
for(var i = 0; i < row.children.length; i++) {
if(row.children[i].innerHTML == ""){
row.children[i].innerHTML = "Entry Missing"; //Set text of current cell as 'Entry Missing'
}
}
});
</script>
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)
first of, thank you for taking the time to read this, I will try my best to explain what I'm trying to achieve using jquery, I am currently stuck on moving sets of TRs on a new position. I can move the headers just fine.
here is what my generated table looks like:
<table border="1">
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
<td class="gheader" colspan="2">header1</td>
</tr>
<tr>
<td class="glabel"><label id="label1">label1</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value=""></td>
</tr>
<tr>
<td class="gheader" colspan="2">header2</td>
</tr>
<tr>
<td class="glabel"><label id="label2">label2</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</tbody>
</table>
next:
I want to new move the TD's beside the first (td.class>gheader) .. yes this is possible / done. so now, my table looks like:
<table>
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
<td class="gheader">header1</td>
<td class="gheader">header2</td>
..and so on
</tr>
<tr>
now here is where my problem lies:
upon moving the generated td's with class gheader ( header1,header2,header3 ) to be on the same row how can I move the following:
<tr>
<td>label(id)</td>
<td>checkbox(id)</td>
<tr>
in between each headers which was newly moved
possible table output would look like:
<table border="1">
<thead class='thx'>
<tr>
<td class="gheader" colspan="2">h</td>
<td class="gheader" colspan="2">i</td>
</tr>
</thead>
<tbody>
<tr>
<td class="gheader" colspan="2">header1</td>
<td class="gheader" colspan="2">header2</td>
</tr>
<tr>
<td class="glabel"><label id="label1">label1</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value=""> </td>
<td class="glabel"><label id="label2">label2</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</table>
other notes:
colspan 2 (on gheader) is auto generated
Try
var $tbody = $('table tbody');
$tbody.find('.gheader').appendTo($tbody.find('tr:first-child'));
$tbody.find('tr').slice(1).find('td').appendTo($tbody.find('tr:nth-child(2)'));
$tbody.find('tr').slice(2).remove()
Demo: Fiddle