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.

Answer 1

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

Answer 2

As example, so:

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

Answer 3

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

Answer 4

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

Answer 5

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>

Answer 6

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