Adding html to a table using jquery

Question

I have html table like this:

<table cellpadding="2" cellspacing="1" width="700">
<tbody>
    <tr>
        <td class="dark" colspan="2">
            Customer Details
        </td>
    </tr>
    <tr>
       <td>
               Customer Contact Name
       </td>
       <td>
           <input name="tbname" type="text" id="tbname" class="widetb">
       </td>
   </tr>
</tbody>
</table>

I want to add Some text at the start of the table so it's the first td in the table, how can I do this using jquery? I really don't have clue where to start.

I have to do it this way as I don't have access to change this via the html.

have you searched? Their are lot of examples on how to insert text of html using jquery. What have you tried? — Mivaweb
– Mivaweb, Commented May 21, 2014 at 11:45

mohamedrias · Accepted Answer · 2014-05-21 12:56:53Z

2

Here is a one liner :

   $('td.dark').text('Enter your text here!'); // the class is present in your HTML

This will search for the td with class dark which represents the first td and it will insert the text.

In case you have multiple tables:

$('td.dark').eq(0).text('Enter your text here!'); 

// here 0 represents the position of the table  minus 1 , you want to change the text

edited May 21, 2014 at 12:56

answered May 21, 2014 at 11:54

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

iCollect.it Ltd Over a year ago

They also mentioned in comment, they had "other tables", so .dark may exist on those too.

mohamedrias Over a year ago

What i infer from the OP comment is, that piece of code was matching the first td without class. So it might have matched in other tables also. In case the OP has same class in those too. Then we need the table position. then can define $('td.dark').eq(1).text('Enter your text here!');

vogomatix Over a year ago

eq(0) not eq(1) as arrays are zero based :-)

kosmos · Accepted Answer · 2014-05-21 11:50:14Z

1

As example, so:

$('td', 'table').first().text('hello!');

answered May 21, 2014 at 11:50

kosmos

4,2881 gold badge21 silver badges38 bronze badges

7 Comments

kosmos Over a year ago

Yes, it's more efficient this kind of selector. It means "all td of all tables". Looking to my example $('td', 'table').first(), it means "the first td of all tds of all tables". As point, you can use descendant selectors inside first parameter $('tr > td', 'table')

user3545217 Over a year ago

This looks close but it's interfering with other tables on my page

iCollect.it Ltd Over a year ago

Is it really more efficient than say $('table:first td').first() or $('table:first td:first')?

mohamedrias Over a year ago

The user has .dark as the class for the first td, why shouldn't we target that :P $('td.dark').text('Enter your text here!'); :P

kosmos Over a year ago

@mohamedrias because the first td of a table is always the first td, having class or not. Anyway, I also think it is ok.

|

DankMemes · Accepted Answer · 2014-05-21 12:15:17Z

1

You could try a google search next time.

The jquery method find finds the set of elements in a parent matching a selector, and eq selects a certain element from the set (with element 1 being referenced by 0 as in arrays). Therefore, you can use the following if you only have one table in your entire document:

$("table") // select all tables
    .eq(0) // select the one you want (the only one)
    .find("td") // select all td's
    .eq(0) // select the first one (the one you want)
    .html("insert new content here"); // set the td's inner html

If you have multiple tables, it's tricky. You will need the index of your table relative to other tables. For example, if you have

<table>...</table>
...
<table>...</table>
...
<table>table you are targeting</table>
.......

Then the index of your table would be 2 because it is the third table in the document, and indices start at 0. If you have an index, you can use

var table_index=// set this to the index
$("table") // select all tables
    .eq(table_index) // select the one you want (with the index)
    .find("td") // select all td's
    .eq(0) // select the first one (the one you want)
    .html("insert new content here"); // set the td's inner html

edited May 21, 2014 at 12:15

answered May 21, 2014 at 11:53

DankMemes

2,1372 gold badges21 silver badges30 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

They did mention they "can't change the HTML", so presumably can't add the ID.

vogomatix · Accepted Answer · 2014-05-21 11:50:32Z

0

It helps if you give your table an id, then you can do something similar to:

$('#id >tbody').prepend('<tr><td>A shiny new row<td></tr>');

answered May 21, 2014 at 11:50

vogomatix

5,1332 gold badges27 silver badges51 bronze badges

4 Comments

iCollect.it Ltd Over a year ago

They did mention they "can't change the HTML", so presumably can't add the ID.

user3545217 Over a year ago

I don't have access to change the html, I'm afraid so I can't add an id.

vogomatix Over a year ago

@TrueBlueAussie Fair comment - just have to assume only one table on the page and change the selector to 'tbody'

vogomatix Over a year ago

$('tbody').first().prepend(...)

Venki · Accepted Answer · 2014-05-21 11:58:22Z

0

Give ID to that First td as your code looks like

<table cellpadding="2" cellspacing="1" width="700">
    <tbody>
       <tr>
           <td id="firsttd" class="dark" colspan="2">
               Customer Details
           </td>
       </tr>
       <tr>
           <td>
               Customer Contact Name
           </td>
           <td>
               <input name="tbname" type="text" id="tbname" class="widetb">
           </td>
       </tr>
    </tbody>
</table>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $('#firsttd').text("Your title here");
</script>

edited May 21, 2014 at 11:58

answered May 21, 2014 at 11:49

Venki

5532 gold badges8 silver badges21 bronze badges

4 Comments

DankMemes Over a year ago

Downvoted for bad capitalization, bad grammar, use of 'ur,' and not closing your first script tag

iCollect.it Ltd Over a year ago

They also did mention they "can't change the HTML".

DankMemes Over a year ago

I will remove my downvote but in the future make sure to maintain a professional attitude on Stack Exchange, and make sure to write correct code.

Venki Over a year ago

Sure i will follow your suggestion.

Ryan Brewer · Accepted Answer · 2014-05-21 12:58:29Z

0

If you can't access the HTML at all and if you have multiple tables then this will work:

var newTR = $( "<tr id='newRow'/>" );
var newTRcontent = "<td colspan=1>Your New Text Here</td>";
$("table:nth-of-type(2) tbody tr").first().before(newTR);
$("#newRow").html(newTRcontent);

I made an example fiddle here

Basically it about using the proper JQuery selector so $(table:nth-of-type(2) will select the second table. Then you can use the code I have above or maybe even better yet here is a one-liner:

$("table:nth-of-type(2) tbody tr").first().before("<tr><td>Your New Text Here</td></tr>");

edited May 21, 2014 at 12:58

answered May 21, 2014 at 12:38

Ryan Brewer

1801 silver badge8 bronze badges

1 Comment

Ryan Brewer Over a year ago

Of course this answer assumes you want to actually add a new row which is how I interpreted your question.

Collectives™ on Stack Overflow

Adding html to a table using jquery

6 Answers 6

3 Comments

7 Comments

1 Comment

4 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

7 Comments

1 Comment

4 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related