I have my code for a table that I created in html with one row, but I want to add more rows to it, the number of total rows has to be equal to the value that my combox takes (24,36,48 rows in total):
<div id="visible" class="table-responsive">
<table class="table " id="tablacondatos" name="tablacondatos">
<thead>
<tr>
<th scope="col">MES</th>
<th scope="col">CUOTA</th>
<th scope="col">INTERES</th>
<th scope="col">AMORTI.</th>
<th scope="col">CAPITAL</th>
<th scope="col">SEGURO DESGRAV.</th>
<th scope="col">SEGURO INMOBIL.</th>
<th scope="col">GASTOS ADM.</th>
<th scope="col">CUOTA FINAL</th>
</tr>
</thead>
<tbody id="cuerpotabla" name="cuerpotabla">
<tr id="filamaestra">
<td id="mes" name="mes">0</td>
<td id="cuota" name="cuota">0</td>
<td id="interes" name="interes">0</td>
<td id="amorti" name="amorti">0</td>
<td id="capital" name="capital">0</td>
<td id="segurodesgrav" name="segurodesgrav">0</td>
<td id="seguroinmobil" name="seguroinmobil">0</td>
<td id="gastosadm" name="gastosadm">0</td>
<td id="cuotafinal" name="cuotafinal">0</td>
</tr>
</tbody>
</table>
</div>
This is how I get the value of my combo for the rows:
ahorrar = document.getElementById("plazooperacion").value; // 24,36,48 rows
I am using this code to add rows, but the problem is that it generates too many rows, and in the first cells I am putting a counter, which goes from 1 to 24, or 1 to 36 or from 1 to 48; but it generates them backwards (it puts the last one first and the first one last):
ms=ms+1; //accountant
var table = document.getElementById("cuerpotabla");
var row = table.insertRow(0);
//this adds row in 0 index i.e. first place
row.innerHTML = "<td>"+ms+"</td><td id='cuota' name ='cuota'>"+cuota+"</td><td id='interes' name='interes'>"+interes+"</td><td id='amorti' name='amorti'>"+amorti+
"</td><td id='capital' namre='capital'>"+capital+"</td><td id='segurodesgrav' name='segurodesgrav'>"+segurodesgrav+"</td><td id='seguroinmobil' name='seguroinmobil'>"+seguroinmobil+"</td><td id='gastosadm' namre='gastosadm'>"+gastosadm+"</td><td id='cuotafinal' name='cuotafinal'>"+cuotafinal+"</td>";
Related
I have a standard HTML table, but I cant seem to find anything in order to get a foothold and get started.
My table is this:
<div id="seriesDiv" style="margin-top: 0px;">
<table class="tableFile2" summary="Results">
<tbody><tr>
<th scope="col" width="7%">Filings</th>
<th scope="col" width="10%">Format</th>
<th scope="col">Description</th>
<th scope="col" width="10%">Filing Date</th>
<th scope="col" width="15%">File/Film Number</th>
</tr>
<tr>
<td nowrap="nowrap">4</td>
<td nowrap="nowrap"> Documents</td>
<td class="small">Statement of changes in beneficial ownership of securities<br>Acc-no: 0001209191-19-051031 Size: 9 KB </td>
<td>2019-09-27</td>
<td></td>
</tr>
<tr class="blueRow">
<td nowrap="nowrap">4</td>
<td nowrap="nowrap"> Documents</td>
<td class="small">Statement of changes in beneficial ownership of securities<br>Acc-no: 0001209191-19-050363 Size: 50 KB </td>
<td>2019-09-20</td>
<td></td>
</tr>
So standard stuff -- table, tbody, trs and tds
I have tried
var rows = $("#seriesDiv").find("table");
console.log("in front loop ", rows.length);
for (var i = 0; rows.length; i++) {
console.log("inside loop");
}
and I tried:
var rows = $(".tableFile2").find("tr");
```
Can someone please show me how to do this? I want to loop through TRs, and for each TR, I want to loop through TDs.
thank you
The code below will help you loop through each tr. Also, take note that if you look for only "tds" for each "tr", you will not find "th". Thus, you also have to look for "ths". Take note that the code below is just an example. Thus, no error check or data evaluation or anything like that.
const cheerio = require('cheerio');
var html = `
<div id="seriesDiv" style="margin-top: 0px;">
<table class="tableFile2" summary="Results">
<tbody><tr>
<th scope="col" width="7%">Filings</th>
<th scope="col" width="10%">Format</th>
<th scope="col">Description</th>
<th scope="col" width="10%">Filing Date</th>
<th scope="col" width="15%">File/Film Number</th>
</tr>
<tr>
<td nowrap="nowrap">4</td>
<td nowrap="nowrap"> Documents</td>
<td class="small">Statement of changes in beneficial ownership of securities<br>Acc-no: 0001209191-19-051031 Size: 9 KB </td>
<td>2019-09-27</td>
<td></td>
</tr>
<tr class="blueRow">
<td nowrap="nowrap">4</td>
<td nowrap="nowrap"> Documents</td>
<td class="small">Statement of changes in beneficial ownership of securities<br>Acc-no: 0001209191-19-050363 Size: 50 KB </td>
<td>2019-09-20</td>
<td></td>
</tr>
`;
const $ = cheerio.load(html);
var tables = $("#seriesDiv").find("table");
var trs = $(tables).find("tr");
for ( let i = 0; i < trs.length; i++ ){
let tds = $(trs[i]).find("td");
let ths = $(trs[i]).find("th");
for ( let j = 0; j < ths.length; j++ ){
console.log($(ths[j]).text());
}
for ( let j = 0; j < tds.length; j++ ){
console.log($(tds[j]).text());
}
}
I need to edit values in a table where the rows/cells are generated dynamically so I they have no html id. I am currently doing this by going to tr:nth-child, but this only works if the value I set for rowID corresponds to that position in the table. Ex: If I remove the 3rd item from the table, the item with rowID=4 is now the 3rd child of the tr, and the following code will edit the wrong cells.
// I get the rowID like this:
rowID = $(this).data("row-id");
// This is what I'm doing now to edit the table:
$('#or-table tr:nth-child(' + rowID + ') td:nth-child(3)').html($('#aff-selector').val());
$('#or-table tr:nth-child(' + rowID + ') td:nth-child(4)').html($('#editor-code').val());
$('#or-table tr:nth-child(' + rowID + ') td:nth-child(5)').html($('#editor-lat').val());
$('#or-table tr:nth-child(' + rowID + ') td:nth-child(6)').html($('#editor-long').val());
<!-- This is the table: -->
<table id="or-table" class="table table-condensed table-hover table-striped bootgrid-table">
<thead>
<tr>
<th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
<th data-column-id="aff" align="center">Affiliation</th>
<th data-column-id="code">Symbol Code</th>
<th data-column-id="lat">Latitude</th>
<th data-column-id="long">Longitude</th>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
</tr>
</thead>
<tbody></tbody>
</table>
You could dynamically assign the row ids using a for loop and then redo that calculation every time you remove a row.
function foo () {
var rowCount = $('#or-table tbody tr').length;
for (i=1;i <= rowCount; i++) {
$('#or-table tbody tr:nth-child("'+i+'")').data('row', i);
}
}
You could run this function on $(document).ready and again after the removal of any row.
Use the HTMLTableElement interface. BTW, why would you need to remove a <td>? Wouldn't be easier just to remove the data inside the <td>?
Get a reference to the <table>
-var or = document.getElementById('or-table');
Then use the .rows property.
-or.rows[0] // first row of table
Next, use the .cells property.
-or.rows[0].cells[2] // first row, 3rd cell
Finally, edit the value of cell with innerHTML or textContent.
-or.rows[0].cells[2].innerHTML='test' // set first row, 3rd cell content to "test"
The following Snippet demonstrates the use of the HTMLTableElement interface:
SNIPPET
var or = document.getElementById('or-table');
function seekCell(row, cell) {
var data = document.getElementById('data').value;
var row = parseInt(row, 10);
var cell = parseInt(cell, 10);
var rows = or.rows.length; // max number of rows
var cells = rows * 6; //max number of cells
(row > rows) ? row = rows: row = row - 1;
(cell > cells) ? cell = cells: cell = cell - 1;
var tgt = or.rows[row].cells[cell];
tgt.innerHTML = data;
}
[type='number'] {
width: 30px;
}
<!-- This is the table: -->
<table id="or-table" class="table table-condensed table-hover table-striped bootgrid-table">
<thead>
<tr>
<th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
<th data-column-id="aff" align="center">Affiliation</th>
<th data-column-id="code">Symbol Code</th>
<th data-column-id="lat">Latitude</th>
<th data-column-id="long">Longitude</th>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>NONE</td>
<td>🗡</td>
<td>20</td>
<td>30</td>
<td>KILL</td>
</tr>
<tr>
<td>02</td>
<td>NONE</td>
<td>🖉</td>
<td>30</td>
<td>30</td>
<td>EDIT</td>
</tr>
</tbody>
</table>
<form id='f1' name='f1' onsubmit='seekCell(row.value, cell.value)'>
<fieldset>
<legend>Row & Cell</legend>
<label>Row:
<input id='row' name='row' type='number' min='1' max='99'>
</label>
<label> <small>Note: The first row is the <thead></small>
</label>
<br/>
<label>Cell:
<input id='cell' name='cell' type='number' min='1' max='6'>
</label>
<label><small> Note: The number will be adjusted for 0-Index enumeration. (i.e. input -1)</small>
</label>
<br/>
<label>Data:
<input id='data'>
</label>
<input type='submit'>
</fieldset>
</form>
I am trying to read all rows from a dynamic table. The main idea is to read all the rows and store it in an array for further processing. But so far I have not been able to get the row data. The code below only returns the table headers.
Here is the code:
var data = [];
var i = 0;
$('#tempTable td').each(function (index, tr) {
var tds = $(tr).find('td');
if (tds.length > 1) {
data[i++] = {
action: tds[0].textContent,
spec: tds[1].textContent,
data: tds[2].textContent,
unit: tds[3].textContent,
upper_tol: tds[4].textContent,
lower_tol: tds[5].textContent,
tol_unit: tds[6].textContent,
def: tds[7].textContent
}
}
});
And the HTML markup looks like this:
<table id='tempTable'>
<thead>
<tr>
<td class='table_head' width='80px'>Header1</td>
<td class='table_head' width='435px'>Header2</td>
<td class='table_head' width='100px'>Header3</td>
<td class='table_head' width='100px'>Header4</td>
<td class='table_head' width='100px'>Header5</td>
<td class='table_head' width='100px'>Header6</td>
<td class='table_head' width='100px'>Header7</td>
<td class='table_head' width='80px'>Header8</td>
</tr>
</thead>
<tbody>
<!-- Rows inserted dynamically here using jQuery -->
</tbody>
</table>
You have initialized your table headers as 'td' instead you need to initialize them in 'th' as below..
<table id='tempTable'>
<thead>
<tr>
<th class='table_head' width='80px'>Header1</th>
<th class='table_head' width='435px'>Header2</th>
<th class='table_head' width='100px'>Header3</th>
<th class='table_head' width='100px'>Header4</th>
<th class='table_head' width='100px'>Header5</th>
<th class='table_head' width='100px'>Header6</th>
<th class='table_head' width='100px'>Header7</th>
<th class='table_head' width='80px'>Header8</th>
</tr>
</thead>
<tbody>
<!-- Rows inserted dynamically here using jQuery -->
</tbody>
</table>
Also see the at which event you are selecting table data(Before selection table should be filled with data).
For selecting the data from table :
//traverse each row
$('#tempTable tr').each(function (index, tr) {
var cols = [];
//get td of each row and insert it into cols array
$(this).find('td').each(function (colIndex, c) {
cols.push(c.textContent);
});
//insert this cols(full rows data) array into tableData array
tableData.push(cols);
});
console.log("tableData: ", tableData);
Please find the fiddle https://jsfiddle.net/Prakash_Thete/frm2ebug/1/ for the same..
I have a table with four columns. The first two columns are hidden. I want to get the values of the second and third columns on row click. I can get the value of the third column using the below code. But how can I get the value of the hidden column?
$('body').on( 'click','#item-grid table tbody tr', function() {
$('#PurchaseOrder_supplier_name').val($(this).children(':nth-child(3)').text());
});
Below is the table html.
<table class="table table-bordered table-condensed table-hover table-striped dataTable">
<thead>
<tr>
<th id="item-grid_c0" style="display:none">Supplier ID</th>
<th id="item-grid_c1" style="display:none">Supplier ID</th>
<th id="item-grid_c2"><a href="/builders_common/index.php?r=purchase/purchase/multipurchaseorderdetailview&PurchaseOrder%5Bvoucher_no%5D=12&PurchaseOrderDetails%5Bpurchase_voucher_no%5D=12&PurchaseOrderDetails%5Bproject_id%5D=45&PurchaseOrderDetails%5Bitem_id%5D=79&ajax=item-grid&sort=supplier"
class="sort-link">Supplier</a>
</th>
<th id="item-grid_c3"><a href="/builders_common/index.php?r=purchase/purchase/multipurchaseorderdetailview&PurchaseOrder%5Bvoucher_no%5D=12&PurchaseOrderDetails%5Bpurchase_voucher_no%5D=12&PurchaseOrderDetails%5Bproject_id%5D=45&PurchaseOrderDetails%5Bitem_id%5D=79&ajax=item-grid&sort=item"
class="sort-link">Item</a>
</th>
<th id="item-grid_c4"><a href="/builders_common/index.php?r=purchase/purchase/multipurchaseorderdetailview&PurchaseOrder%5Bvoucher_no%5D=12&PurchaseOrderDetails%5Bpurchase_voucher_no%5D=12&PurchaseOrderDetails%5Bproject_id%5D=45&PurchaseOrderDetails%5Bitem_id%5D=79&ajax=item-grid&sort=rate"
class="sort-link">Rate</a>
</th>
</tr>
</thead>
<tbody>
<tr class="odd selected">
<td style="display:none">
<input type="hidden" id="ProjectPurchaseOrderSupplierwise_item_id_5" name="ProjectPurchaseOrderSupplierwise[item_id_5]" value="79" class="gridfield">
</td>
<td style="display:none">
<input type="hidden" id="ProjectPurchaseOrderSupplierwise_supplier_id_5" name="ProjectPurchaseOrderSupplierwise[supplier_id_5]" value="14" class="gridfield">
</td>
<td>General</td>
<td>Cement</td>
<td>
<input type="text" id="ProjectPurchaseOrderSupplierwise_rate_5" name="ProjectPurchaseOrderSupplierwise[rate_5]" value="50.00" readonly="readonly" class="gridfield">
</td>
</tr>
</tbody>
</table>
Try like below.
$('body').on( 'click','#item-grid table tbody tr', function() {
$(this).find('td:eq(1) input').val(); // 2nd column
$(this).find('td:eq(2)').text(); // 3rd column
});
You can use either of the two :eq() Selector or :nth-child() Selector.
https://api.jquery.com/nth-child-selector/
https://api.jquery.com/eq-selector/
Click here
Example code with your HTML
To get a specific cell by index, you can use :
$(this).find('td:nth-child(2) input').val(); // 2nd column
$(this).find('td:eq(1) input').val(); // 2nd column
$(this).find('td:nth-child(3)').text(); // 3rd column
$(this).find('td:eq(2)').text(); // 3rd column
$('#PurchaseOrder_supplier_name').val($(this).children(':nth-child(3):visible').text());
I have prepared a jsfiddle environment, just to show you my issue. I want to move two rows together (the red ones) with the tablednd jquery plugin or maybe an alternative / workaround.
Any ideas about that?
I know I can nest a table inside a tr/td but then I loose the table header width td-alignments with the root table.
Many thanks.
<table border="1" id="table-1" cellpadding="5" cellspacing="0" class="grid">
<thead class="header nodrop">
<th nowrap style="">Col0</th>
<th nowrap style="">Col1</th>
<th nowrap style="">Col2</th>
<th nowrap style="">Col3</th>
<th nowrap style="">Col4</th>
<th nowrap style="">Col5</th>
<th nowrap style="">Col6</th>
<th nowrap style="">Col7</th>
</thead>
<tbody>
<!-- first row group -->
<tr id="1111" style="background-color:red;">
<td>Text1.0</td>
<td>Text1.1</td>
<td>Text1.2</td>
<td>Text1.3</td>
<td>Text1.4</td>
<td>Text1.5</td>
<td>Text1.6</td>
<td>Text1.7</td>
</tr>
<tr id="1111" style="background-color:red;">
<td colspan="8">this row belongs to ROW ID 1111 above red</td>
</tr>
<!-- second row group -->
<tr id="2222">
<td>Text2.0</td>
<td>Text2.1</td>
<td>Text2.2</td>
<td>Text2.3</td>
<td>Text2.4</td>
<td>Text2.5</td>
<td>Text2.6</td>
<td>Text2.7</td>
</tr>
<tr id="2222">
<td colspan="8">this row belongs to ROW ID 2222 above white</td>
</tr>
</tbody></table>
http://jsfiddle.net/vbnyfapt/5/
Finally I solved it!
$("#table-1").sortable({
helper: function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
},
items: "tbody"
}).disableSelection();
http://jsfiddle.net/cfv6tbd0/