Getting and Setting position of Content with Jquery

Question

I have a table with two rows, the first being the thead the second being the tbody (yes I know I have not included these tags, no need to correct). My goal here is to get the position of each th . My overall all goal is to clone the content of each th and prepend it to each corresponding td , so I have a very mobile friendly table, except I do not know how to achieve this dynamically.

<tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
</tr>
<tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
</tr>

I'm just confused on how I could get the position of each th , I think once I have that, I can solve the rest of this problem. Can anyone give me a hint of where I should be going with this?

Answer 1

Assuming I've understood your question correctly, you want this output:

<tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
</tr>
<tr>
    <td>1 - one</td>
    <td>2 - two</td>
    <td>3 - three</td>
    <td>4 - four</td>
</tr>

If so you need to use index() to get the column of the th and append as required. Try this:

$('tr td').each(function() {
    var idx = $(this).index();
    $(this).prepend($('th').eq(idx).text() + ' - ');
});

Example fiddle