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>
Related
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!
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 7 years ago.
Improve this question
Here is my fiddle
Here is my html code
<table id="example" class="display" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="display:none">Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td style="display:none">Garrett Winters</td>
<td>Accountant</td>
</tr>
</tbody>
</table>
The output i am getting is like
System Architect
Accountant
But i want to display like
System Architect | Accountant
i.e., Row should be look like column.
Note :
I am hiding the first td, because my search plugin(datatables) will consider the first <td> inside the <tr>
How can i do this ?
It looks like you are trying to force a non table structure on a table element. Even though this is possible using CSS (as others have stated), this is bad practice and should be avoided. I would recommend switching to a different UI plugin that uses divs or list elements.
I'd say a simple css could fix this:
#example tr {
display : inline-block;
}
#example tr {
display: inline-block;
}
please use this...
use tr { display:table-cell}; in CSS, add additional <tr><td> for |
fiddle here
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
For my class I have to make the game of Tic Tac Toe using what I have learned which is HTML/CSS and some javascript. I have not learned arrays, loops, or objects yet. So I am hoping this is possible. What I have learned is functions, variables, and if/else/else if. Basically I don't want to ask you nice people to help me with the entire thing because I don't think anyone would do that and it would take to long. I will, however, say that I have no idea where to even start but hopefully I can figure it out. What I do need help on however is setting up the actual board. Do you think I could do something in HTML for setting up the board? Like using the table, th, and tr elements? Or would CSS be better? Thanks a bunch to the people that help!
Here's a table that would help.
Html:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Css:
td {
border: 1px solid black;
height: 50px;
width: 50px;
}
As rpax said,
Use a table with the number of rows you want and the number of columns.
Another suggestion I have for game programming in general is draw it out and write every action possible for all characters down. It may even be a good idea to brainstorm ways to do these tasks on paper. The main thing is, WRITE IT OUT. This will make sure you have a saved plan and you can always change it later.
I would create a div in each cell with an id and an onclick function.
Maybe you could do something like
var a =1 ;
function dosomething(){
if(a=1){
document.getElementById('').innerHTML='x';
}else{
document.getElementById('').innerHTML='O';
}
a=0;
}
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');
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 9 years ago.
Improve this question
I have a div 'someDiv'. In that div I have a table, and in the table's cells, I have textareas.
I want that when a certain button is clicked 'mybutton', the full html (it might has changed because the user put some data in the cells), will be put inside a hidden field.
All of that - using Jquery.
Of course, I tried $('#someDiv').html() but it gives me the original html and not what the user put.
EDIT: here is the code:
http://jsfiddle.net/RCQmj/
<div id="interviewSummarySkeleton">
<table>
<tr>
<td>
<textarea class="title" tabindex="1">title 1:</textarea>
</td>
<td>
<textarea class="content" tabindex="8"></textarea>
</td>
</tr>
<tr>
<td>
<textarea class="title" tabindex="2">title 2:</textarea>
</td>
<td>
<textarea class="content" tabindex="9"></textarea>
</td>
</tr>
</table>
</div>
<div id="interviewHtmlHere">PUT HERE THE HTML FROM PREV DIV AFTER USER CHANGED IT</div>
When you click on the button - you will have to set all the textarea's text to it's value before getting the .html()
$('button').click(function(){
$('#interviewSummarySkeleton textarea').text(function(){
return this.value;
});
$('#interviewHtmlHere').text($('#interviewSummarySkeleton').html());
});
FIDDLE
You could set the innerHTML of each textarea to the value before your html() call:
http://jsfiddle.net/ZuXwQ/1/
$('button').click(function(){
$('body').find("textarea").each( function() {
this.innerHTML = this.value;
});
console.log($('body').html());
});
Here it is applied to your fiddle: http://jsfiddle.net/RCQmj/1/
Here again, if you want it added as text: http://jsfiddle.net/RCQmj/2/
in either case, I'm assuming interviewHtmlHere is hidden in your actual context?
The .html() method will get the full HTML-code of any element, using jQuery.