Develop Reference

Grabbing data from first column of table and appending to last column in jQuery

I am trying to grab a product number which is in the first column of this table, and create a last column to append this product number in a link. Each number has a PDF file of the same name.
Essentially I want to grab the first <td> value in a row, and append another <td> with that value to the end of that row.
I can append the table row with static icons and links, but I cannot figure out how to make each row display the product number that is in the first td of that same row.
$('#table tbody').each(function() {
var $partNumber = $('tr:not(.row0) td.column0').html();
$('tr:not(.row0)').append('<td><a class="button button-inverse button-block button-small" href="/writable/data-sheets/' + $partNumber + '.pdf"><i class="fal fa-file"></i></a></td>')
});

Remember that in general a jquery object represents any number of HTML elements. The each method iterates over those elements. (Not their children.) I assume there's only one id="table" element, and it only contains one <tbody>, so your loop only runs once.
When the loop runs, $('tr:not(.row0) td.column0') is a jquery object, which contains several HTML elements, namely the first <td> in each row except for the first row. Also, it's not localised to $('#table tbody'), so if there's another table somewhere with td.column0 elements it will pick up those too. But anyway... $partNumber will be the inner HTML of the first element in the jquery object, which is the first cell in the second row.
Then, the next line will generate a jquery object appending (a copy of) the new element to the end of every row. Note that these new cells will be exact copies of each other, since they all use the same value of $partNumber.
So, if my analysis is correct, your code adds a new column in the correct place, but all the links are to the href that the first row is supposed to link to. Is this what you're seeing?
To fix this: Firstly, you want to iterate over the rows, not the table bodies. Then, inside your anonymous function, you need to get the row you're currently on. The documentation for each says this can be done using arguments to the function.* So if you change it to function(n, element), element will represent the <tr> element. That's not a jquery object, but you can get a jquery object with $(element). From there you can get the first <td> inside it using the find method. And the rest is as you've done it.
In summary:
$('#table tbody tr:not(.row0)').each(function(n, element) {
var $element = $(element);
var $partNumber = $element.find('td.column0').html();
$element.append('<td><a class="button button-inverse button-block button-small" href="/writable/data-sheets/' + $partNumber + '.pdf"><i class="fal fa-file"></i></a></td>')
});
* You can also do it using this; the syntax is slightly shorter, but personally I don't like the idea of this in javascript. But it's up to you.

Find the next table after h3 tag

Here is what I am working with:
<table class="info-table"></table>
<h3><span id="regular_text">Regular Text</span></h3>
<table class="info-table"></table> <!--Give this table an id.-->
I need to give the 2nd table an id but I'm not sure how I can reach it. Is there some sort of jQuery or JavaScript that can compute the "next" table after h3 #regular_text?

Use the adjacent sibling selector:
document.querySelector('h3 + table');
If you need to select the table that's immediately after the h3 tag that contains an element with the id regular_text, I'm not aware of a pure CSS selector solution, but you can do it in plain JS like this:
var heading = document.getElementById('regular_text').parentElement;
var table = heading.nextElementSibling;
table.id = 'tableId';

Dynamic creation and selection of html elements via jquery

How can I access the dynamically created html element by its Id on very next line of this following code?
var line = $('<div class="showInGrid" id="removeMeLater">
<span class="dateP" id="calendar' + ind + '" ></span>
</div>');
I want to access it like the following line of code.
$("#calendar"+ind).datepicker({});
However I'm able to link the datepicker with it like the following.
line.datepicker({});
But obviously it is not giving me the desired result and it gets created every time loop iterates over it.

The problem is you have not added the element to the DOM.
jquery selector will search inside the DOM. since the element is not in DOM it will return an empty array.
run $("#calendar"+ind).datepicker({}); after appending it to the body

How to get the text of several td which have same id name?

i have table in that
five td which contain same id. Id="divParent" but in that different text,
i want to access all the text in array which id ="divParent" in other page using java script.
how to get this
i tried to do this using this code;
var divParent=new Array();
divParent=window.parent.document.getElementById('divParent');

The id attribute should be unique across a single document. That is to say, you shouldn't have multiple elements with the same id attribute. You might be better served using the class attribute and document.getElementsByClassName('divParent')

You should never have same id repeat on the same page. Change it to class and access elements by class instead.

you can use jquery each method to iterate through each td

ID should be unique. But if you want to loop through table cells and put them into an array:
var divParent=new Array();
var td = document.getElementsByTagName('td');
for(var t=0;t<td.length;t++){
if(td[t].className == "table_cell_class"){
divParent.push(td[t].innerHTML);
}
}
the innerHTML gets everything that's inside the table cell element.

javascript JQuery printing to multiple divs on page load?

I basically have several divs each with ids "id_1", "id_2" "id_3" etc. The divs are all initially empty.
I want on page load to populate all the divs with certain html content. But the part that has been troubling me is that I also need to extract the unique id portion for use within the html:
<div id="id_3">
<div id="inner_3></div>
</div>
where the inner div is what gets printed. Notice that the '3' is extracted from the container div id by the javascript and then subsequently used and printed in the inner div.
Any ideas how to do this with jquery? Thanks in advance.

You can fetch all the div elements that have an id that starts with a certain string:
$(function() {
$('div[id^=id_]').each(function() {
var id = $(this).attr('id').split('_').pop();
$(this).html(
$('<div/>').attr('id','inner_' + id)
);
});
});
Then you loop through each, get the id, and do your HTML manipulation.

there are several ways of doing this, but in the end its just simple string manipulation. Here is an example:
// on page load
$(function(){
//find all divs and iterate through them - you can use any selector you like
$("div").each(function(){
//this gets the id attribute of the div we are currently on in the loop
var id = $(this).attr("id");
//this gets the number at the end - notice that its just string manipulation
var nid = id.slice(id.lastIndexOf("_") + 1)
//create inner div, give it an id and append
var innerDiv = $('div').attr("id", "inner_" + nid);
$(this).append(innerDiv);
//all done - you can append content to inner div here
// innerDiv.append(someContent);
});
});