We Keep Coding

How to apply hyperlinks to URL text in existing HTML - UPDATED WITH JSFIDDLE & WORKING SOLUTION

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 + ''
}
});

jQuery how to update range number of rows in table

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);
});

Return row's rowIndex on page load

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/

Javascript always add 1 to total rows

I am confused about this Javascript code which I used to get total rows in a table. It will always output an excess of 1. Example: it will print 5 instead of 4!
<script>
(function() {
var div = document.getElementById('divID11');
div.innerHTML = document.getElementById('tableId11').rows.length;
})();
</script>
<div id =divID11></div>
and table structure is shown below
<table id="tableId11>
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $data ?></td>
</tr>
</tbody>
What I am lacking here?
Outputs 3 for the name column when in fact there only 2.

If you want count only TBODY rows, use this JavaScript code:
(function() {
var div = document.getElementById('divID11');
div.innerHTML = document.getElementById('tableId11').getElementsByTagName("tbody")[0].rows.length;
})();
Your JavaScript code counting all rows in table (thead and tbody). If you want count only tbody rows, you must specify the element (so you must modify your code to specify, with which part of your table you wanna work).
JSFiddle here

Try this :
var div = document.getElementById('divID11');
div.innerHTML = document.getElementById('tableId1').getElementsByTagName('tbody')[0].rows.length;

Adding table rows from a Grails Template on Button Click

So, the _form.gsp template associated with my create.gsp creates an initial table from a template for the row as follows:
<table id="myTable">
<!-- define table headers here -->
<g:each var="i" in="${1..5}">
<g:render template="tableRow" model="['i': i]" />
</g:each>
</table>
What I'd like to do is add a button or a link underneath that table that let's you add five more rows, while keeping all the data you've entered in the form so far.
I can see how that's possible in "pure" javascript, but I'd basically have to repeat the _myTable.gsp HTML in my javascript file. I'd like to avoid that (DRY, etc.).
How can I do that?
Edit
So, I tried Gregg's solution (below). Here's what I came up with.
The Controller has an action:
def addMoreRows() {
println params
def i = params.rowNumber + 1
def j = i+5
println "i is set to " + i
render(template: "foapRow", bean:i, var:i, model: ['rowStart': i, 'rowEnd': j])
}
The create.gsp page calls the _form.gsp as normal, adding a rowStart and a rowEnd to the model.
create.gsp
<g:render template="form" model="['userId':userId, 'rowStart':1, 'rowEnd':5]"/>
*_form.gsp*, in turn, passes those parameters on to the row template, and creates a link to call the above controller action. It also has the javascript Gregg recommended:
<script type="text/javascript">
$("#addRowsLink").on("click", function(e) {
e.preventDefault();
$.get("/Controller/addMoreRows", function(html) {
$("#theTableInQuestion>tbody").append(html);
});
});
</script>
<table>
...
<g:render template="tableRow" model="['rowStart':1, 'rowEnd':5]"/>
</table>
<g:remoteLink id="addRowsLink" action="addMoreRows" update="theTableInQuestion" onSuccess="addRows(#theTableInQuestion, data, textStatus)" params="['rowNumber':data]">Add More Rows</g:remoteLink>
The *_tableRow.gsp* begins and ends with:
<g:each var="i" in="${rowStart..rowEnd}">
<tr>
...
</tr>
</g:each>
From a previous attempt, I have this function in my included javascript file:
function addRows(tableId, rowCode, status) {
$(tableId + ' tr:last').after(rowCode);
}
Right now, when I click the "Add More Rows" link, I still get taken to a new page, and it only has one row on it.

One possible solution. You're going to need to change your template so it does the looping:
GSP:
<table id="myTable">
<tbody>
<g:render template="tableRows" model="[loopCount:loopCount, moreData:moreData]" />
</tbody>
</table>
Template:
<g:each in="${loopCount}" var="idx">
<tr>
<td>.....</td>
......
</tr>
</g:each>
JavaScript:
$("#someButtonId").on("click", function(e) {
e.preventDefault();
$.get("/controller/someAction", function(html) {
$("#myTable>tbody").append(html);
});
});
Controller:
def someAction = {
// logic here
render template: "tableRows", model="[loopCount: 5, moreData:moreData]"
}
You could also submit all the data in your table to the server every time and refresh the entire page, adding logic to loop over some variable number of rows. But you would need to collect all that data on the server and make sure it gets put back in the request.
There's probably a dozen ways to do this so don't be surprised if you get that many answers. :o)