Develop Reference

JavaScript pull data from HTML table cell to input [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed last year.
Improve this question
I have an HTML page. On the page I have a table with 8 columns and 56 rows and an input (number).
Whichever cell I click, I want it to transfer the number in it into the input. How can I do that?
Thank you in advance for your help.

const myInput = document.querySelector('#myInput');
const cells = document.querySelectorAll('#myTable tr td');
cells.forEach(el =>
el.addEventListener('click', (e) => myInput.value = e.currentTarget.innerText)
);
This is assuming html like the following:
<input type="text" id="myInput" value="" />
<table id="myTable">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
Update (Breakdown of what we are doing above):
All we are doing is we are keeping things really simple. We create a selector for the elements we're after. Given there are multiple table cells, we use querySelectorAll which will return an array of elements.
We then just loop over all these elements and add a click event listener to each of them. The listener grabs the innerText of the cell and just sets it to the targeted input box.
This could be expanded on however you want. Chose to keep this simple and just do what was being asked.
Hope that helps!

Javascript innerHTML not working and placing in the wrong spot [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have this div inside a table.
<table>
<tr>...</tr>
<div class="injector" id="inject1"></div>
<tr>...</tr>
</table>
Using javascript I'm tring to inject some other html inside "inject1". My JS is:
document.getElementById("inject1").innerHTML+="<tr><td><h3 class='description'>Runway visual range:</h3></td></tr><tr><td><h4 class='description'>Runway number:</h4></td><td><input type='text' class='dataField' id='runwayNumber' disabled></input></td></tr><tr><td><h4 class='description'>Runway visibility:</h4></td><td><input type='text' class='dataField' id='runwayVisibility' disabled></input></td></tr>";
but for some reason, instead of putting the new table rows in the midddle of the table (where the div is), it puts the new lines on top of the table, and without the proper alignment. If i manually paste the same exact code (the one inside the quotation marks), it works just fine.

A DIV is not a valid child of a table so the browser renders the code differently to make it valid. You should be using a tbody element
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody class="injector" id="inject1"></tbody>
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>

Class to the immediate child is not working [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have a code to call the class. Its work in some browsers. but in some other browsers it will not work. i need to give as a immediate class. then only its working in all browsers. Is any other solution for that?
code is:
<table>
<tr>
<td class="abc">
<table>
<tr>
<td>Immediate child<td>
</tr>
</table>
</td>
</tr>
</table>
In Above code class abc is not apply to immediate child text in all browsers. but the following code is working in all browsers.
<table>
<tr>
<td >
<table>
<tr>
<td class="abc">Immediate child<td>
</tr>
</table>
</td>
</tr>
</table>
I have a bulk of files to change that. Please tell me is there any other solutions for that?
All css property will not work. If i put the class abc to the immediate td means its work. my question is why the css is not working when i apply it for outside of table?

You dont close the tags correctly, the last two <td> should be </td>
<table>
<tr>
<td class="abc">
<table>
<tr>
<td>Immediate child</td>
<!--CHANGED FROM <td>Immediate child<td>-->
</tr>
</table>
</td><!--CHANGED FROM <td>-->
</tr>
</table>

How to make a <td> element look like a nested <tr> [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have a table where I need the last td in the row to look like a nested row.
I can't make it a new row, but I want everything in that <td> </td> be nested under that row.
Please see this fiddle . You can click the icon to see a new row appear. But I can't use a new row, it needs to be in the same DOM row. I want the last column to move down to look like a new row instead. It doesn't have to align, just get to a new row.
Is there css that will make that happen?
Can I use jquery/js to change the css to make that happen?

You can use colspan for the tr and give it the number of columns you have...then you will only need one td

You could hide some cells and then use colspan to span the remaining columns.
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td class="hide">3.1</td>
<td class="hide">3.2</td>
<td class="hide">3.3</td>
<td colspan=4>3.4</td>
</tr>
</table>
table {width:100%;color:white}
td {background:blue}
tr:last-of-type td:last-of-type {background:green;}
.hide {display: none;}

How can I include a tag in html table Column? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
I want to insert a anchor tag inside a column Using JavaScript or JQuery
For example change the first column value 'A' is a link Using JavaScript or JQuery
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
I tried with this code but not working
var cell = document.createElement("a");
innercell .setAttribute("href","#");
document.getElementsByTagName("table")[0].rows[1].cells[0].appendChild(innercell );

add this to window.onload event
var td = document.getElementsByTagName("td")[0]; //change the index in actual page
var a = document.createElement("a");
a.setAttribute('href',"link.html"); // replace "link.html" with your own link
a.innerHTML = "link text";
td.appendChild(a);

Using anchors normally is simply, Due to the end result not being described well give this ago.
Where you want to anchor to type
<a id="ANCHOR_NAME">Some Random Thing</a>
Where you want the link to the anchor to be just type
Visit the Anchor
You can link to an anchor on another page using href="page.html#anchor".

I want to insert a anchor tag inside a column Using JavaScript or JQuery
For example change the first column value 'A' is a link Using JavaScript or JQuery
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td id="first">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
jQuery Example:
$("#first").text('Google');
EDIT: As you don't want to use an Id,
$("td").first().text('Google');