I'm trying to print to page the rowIndex for each row in a table. I would like it to be placed inside the table itself, but I can't seem to get it to work:
<table>
<tr>
<td>r1.cell1</td>
<td>r1.cell2</td>
<td><script>document.write("rowindex = " + this.parentNode.rowIndex);</script></td>
</tr>
<tr>
<td>r2.cell1</td>
<td>r2.cell2</td>
<td><script>document.write("rowindex = " + this.parentNode.rowIndex);</script></td>
</tr>
</table>
Using jQuery is a simple matter of doing it after the document is loaded. Assuming this is the only table in the whole page you could do something like
$('td:last-child').each(function(index, item) { $(item).html(index)})
You can see it in action using this JSFiddle http://jsfiddle.net/qurm4304/
Related
UPDATE: http://jsfiddle.net/daltontech/qfjr7e6a/ - Thanks to both that helped!
Original question:
I get JSON data from a report in my HelpDesk software that I import into an HTML table (via Python) & one of the columns is the address of the request, but it is not clickable. I can edit the Python file (though I don't expect the answer is there) and the HTML file (and Javascript is both fine and expected to be the solution), but I cannot change the JSON data (much).
I can use JQuery, but if vanilla Javascript can do it, that is my preference.
I tried innerHTML (with and without global flag), but after about 20 rows, it fails spectacularly in IE & Chrome (all I tested) & this list is typically 50+.
I do use innerHTML successfully in other places, mainly linking technician names to their requests (a shorter list) like:
{ document.body.innerHTML = document.body.innerHTML.replace('Jenny', 'Jenny'); }
Here's what I have to work with:
<table class="Requests" id="Requests">
<thead><tr><th>URL</th><th>Title</th><th>Technician</th></tr></thead>
<tr><td>https://helpdesk.domain.com/8675309</td><td>I need a phone number</td><td>Jenny</td></tr>
<tr><td>https://helpdesk.domain.com/8675310</td><td>Some other issue</td>
<td>John</td></tr>
</table>
Everything before the number is always the same, so that gives some flexibility and I can have the JSON file provide a few options (just not the <a> tag...) like:
1. 8675309
2. https://helpdesk.domain.com/8675309
3. sometext8675309
4. sometext8675309someothertext
I'm hoping to accomplish either of the two row examples - either works, might prefer latter:
<table class="Requests" id="Requests">
<thead><tr><th>URL</th><th>Title</th><th>Technician</th></tr></thead>
<tr><td>https://helpdesk.domain.com/8675309</td><td>I need a phone number</td><td>Jenny</td></tr>
<tr><td>link</td><td>Some other issue</td><td>John</td></tr>
</table>
Commented Code:
// get the elements
document
.querySelectorAll(".Requests > tbody > tr > td:first-child")
// for each element remove the text and
// replace it with an anchor tag
// use the original element's text as the link
.forEach(c => {
let a = Object.assign(document.createElement("a"), {
href: c.textContent,
textContent: c.textContent
});
c.textContent = "";
c.appendChild(a);
});
Example Snippet
document
.querySelectorAll(".Requests > tbody > tr > td:first-child")
.forEach(c =>
c.parentNode.replaceChild(Object.assign(document.createElement("a"), {
href: c.textContent,
textContent: c.textContent
}), c)
);
<table class="Requests" id="Requests">
<thead>
<tr>
<th>URL</th>
<th>Title</th>
<th>Technician</th>
</tr>
</thead>
<tr>
<td>https://helpdesk.domain.com/8675309</td>
<td>I need a phone number</td>
<td>Jenny</td>
</tr>
<tr>
<td>https://helpdesk.domain.com/8675310</td>
<td>Some other issue</td>
<td>John</td>
</tr>
</table>
If I understand your question right, you want to use client-side JS to modify an already generated HTML table.
The below code works for me with +200 rows so I don't think using .innerHTML has an inherent issue, maybe there is something else causing your code to crash?
EDIT (IE):
let rows = document.querySelectorAll('#Requests tr');
for (let i = 1; i < rows.length; i++) {
rows[i].getElementsByTagName('td')[0].innerHTML = '<a href="' + rows[i].getElementsByTagName('td')[0]
.innerHTML + '">' + rows[i].getElementsByTagName('td')[0].innerHTML + '</a>';
}
let rows = document.querySelectorAll('#Requests tr');
rows.forEach(function(r, i) {
if (i > 0) {
r.getElementsByTagName('td')[0].innerHTML = '' + r.getElementsByTagName('td')[0].innerHTML + ''
}
});
I have a table, that is dynamicallly increased with Firebase, and I need a delete and edit button on each row of the table, currently, the remove button is working, but I am having trouble with the edit button, I saw a few examples around, but i'm not sure how to do it using append()...
Here's what I have so far:
HTML
<table id="tableAssets" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr id="tableHeader">
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th class="mdl-data-table__cell--non-numeric">Brand</th>
<th class="mdl-data-table__cell--non-numeric"> </th>
</tr>
</thead>
<tbody id="table_body"> </tbody>
</table>
JavaScript
rootRef.on("child_added", snap => {
var assetKey = snap.child("id").val();
var name = snap.child("name").val();
var brand = snap.child("brand").val();
$("#table_body").append("<tr data-id='"+assetKey+"'>"+
"<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
"<button class='edit-btn'><i class='material-icons'>mode_edit</i></button>"+" "+
"<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
"</div></td></tr>");
});
And here is what I was thinking on doing with the edit button: Hide the whole row, and add a new one with the saved information, but with text fields, and change the edit button with a save button, but I have no idea how I should be doing this...
$("#table_body").on('click','.edit-btn', function(e){
var $row = $(this).closest('tr');
$row.hide();
});
I'd suggest you to do this:
Have two rows, one for view and one for edit mode. This is easier to
maintain.
Assign an id to the whole row:
$("#table_body").append("<tr id='"+assetKey+"'>
Then when clicking that edit button, pass the id to some method as when you append you have it, it is easier. You can use something
like onclick and call the method:
<button class='edit-btn' onclick=edit(\'"+assetKey+"\')><i class='material-icons'>mode_edit</i></button>
On edit, hide the clicked button row and show the edit mode for that row. As it is already rendered, it works great if you have
multiple rows, stays in place:
('#'+id).hide();
The edit mode row "view" would show the save button or anything else you need. Use the same Technique/strategy to call a save() method.
When save is successful, rebuild both rows and replace them so everything is neat and stays in line.
And to make sense of this and it is not just in words, a functional example using your code on jsfiddle here.
Hope this is of help!
I have table like this.
<tbody>
<tr class="count"><td class="int">1</td>...</tr>
<tr class="hide"></tr>
<tr class="count"><td class="int">2</td>...</tr>
<tr class="hide"></tr>
<tr class="count"><td class="int">3</td>...</tr>
<tr class="hide"></tr>
</tbody>
I used jQuery for dinamic webpage. when user removed a row from list, i need update number range at client again.
this is my code. but my result wrong expected.
$('.count').each(function() {
var ind = $(this).index()+1;
$(this).find(".int").html(ind);
});
*Note for rows that class hide not for view on browser, it for other point.
please help me to find it.
$(this).index() will not work in these case, because hidden elements also have index. Try like following.
$('.count').each(function(i) {
var ind = i + 1;
$(this).find(".int").html(ind);
});
I am having some annoying trouble with this. I need to get the id of the row in my table, while searching by the index.
table_id=$(this).closest('table').attr('id'); //Table Id
I have the table id and for instance I need the second rows id. I have tried using the nth:child along with .children and other but everything I try comes back in an undefined result. I know its a simple fix but I can not seem to get it to work.
This is pretty simple, given the id of the table select the tr and use .eq to find the row needed - remember that it will be zero based, so the second row would be eq(1)
var table_id="myTable"
var secondRowId = $('#' + table_id + ' tr').eq(1).attr('id');
alert(secondRowId)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable">
<tr id="row1">
<td></td>
</tr>
<tr id="row2">
<td></td>
</tr>
</table>
What selector have you tried with nth-child?
If it were me, here is the selector I would use to get the ID of the second row in your table:
var table_id = $(this).closest('table').attr('id');
var t_selector = '#' + table_id + ' tr:nth-child(2)';
var row_id = $(t_selector).attr('id');
I am using the regular expression search code at this link, to allow real time search through a rather large table being populated server-side via php.
With a slight twist to the scenario describe in the above link, I am using table header tags to group (label) chunks of table row's together. I am preventing these table header row's from disappearing with the rest of the table row's so that when searching, the results are still nested in their group.
I would like the table header row's to disappear too, but only when there are no table row's between it and the next table header row. I'm not sure if counting row's will work, since the row's aren't gone, they're just hidden.
As an example, this is how my table is laid out:
HTML:
<table>
<tr>
<th colspan="2">Group 1</th>
</tr>
<tr class="searchable">
<td>Record 1</td>
<td>Record 2</td>
</tr>
<tr class="searchable">
<th>Group 2</th>
</tr>
<tr>
<td>Record 3</td>
<td>Record 4</td>
</tr>
</table>
jQuery:
$( document ).ready(function() {
var $rows = $('tr.searchable');
$('#search').keyup(function(e) {
if (e.keyCode == 27) { $(this).val("") }
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
});
All help is appreciated!! Thanks!
I solved my dilemma by adding another class (unique to each group/label) and within the '.keyup()' section counting the ':visible' rows of each class. Once the number of rows in each class dropped below a specified number, I used '.hide()' in an if statement to make the table headers disappear. The else side of the if statement used '.show()' to bring the table headers back if their classes count rose above the specified number.
I also encountered this issue, it was solved by just targetting the body part for the .filter instead of the table as a whole.
$("#SearchPermissions").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#contentPart tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
Mind the $("#contentPart tr") part of the code.. this refers to the
This way the header is excluded from the search, thus will still be displayed while filtering table data