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

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

Related

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!

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 display table data in Bold or color using jsp, javascript, css [closed]

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 7 years ago.
Improve this question
I have a web application which displays data from a database. It shows results in 0's or numbers. The numbers displayed should be bold or in some color. How do i do I display the results from database in bold in a webapplication.
<svp:tbody rowCount="0" maxDisplayRows="100">
<logic:iterate id="Typ" name="Typ">
<logic:iterate id="ordType" name="ordTypes">
<TR>
<TD style="font-size: 9px"><bean:write name="Type"
property="TCode" /></TD>
<TD style="font-size: 9px"><bean:write
name="Type" property="descr" /></TD>
<%
for (int i = 0; i < 8; i++) {
String idStr = i + "_order";
%>
<TD style="font-size: 9px"><INPUT class="inactive"
readonly="readonly"
id="${Typ.TCode}_${oType.OTypCode}_<%=idStr%>"
type="text" size="10" value="0"></TD>
<%
}
%>
</TR>
</logic:iterate>
</logic:iterate>
</svp:tbody>
your question doesn't have much of a context, so all I can suggest is
<td><b>value</b></td> //if you are using tables
b tag is for making font bold
you can also use
<td style='font-weight:bold'>value</td> //if you are using tables, css style
you can also use
<td class='bold'>value</td> //if you are using tables, css style
.bold //css class definition here
{
font-weight:bold
}
Your code is really messy, but from what I could understand, I'll try and help.
Lets say you have a <td> with a certain value you want to make bold? Add a style attribute to the td with "font-weight:bold;", making it from (for example) <td> into <td style="font-weight:bold;">
If you want to make only non-zero numbers in bold, use the condition?<what to return when true>:<what to return when false>:
int numberThatYouPut = ...;
<td>
<%=numberThatYouPut!=0?"<b>"+numberThatYouPut+"</b>:numberThatYouPut%>
</td>

Making Table <tr> to display one by one [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 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

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

Categories

Resources