tags:

views:

76

answers:

2
<table id="experiences" cellpadding="0" border="1" width="100%" height="100%">

<tr><th>Company</th><th>Job Title</th><th>Industry</th><th>Job Function</th><th>Start Date</th><th>End Date</th></tr>
<tr>
    <td><input type="text" name="company1" class="w100" /></td><td><input type="text" name="jobTitle1" class="w100" value="" /></td><td><input type="text" name="industry1" class="w100" value="" /></td><td><input type="text" name="jobFunction1" class="w100" /></td><td><input type="text" name="startDateJob1" class="w100" /></td><td><input type="text" name="endDateJob1" class="w100" /></td>
</tr>
<tr>
    <td><input type="text" name="company2" class="w100" /></td><td><input type="text" name="jobTitle2" class="w100" /></td><td><input type="text" name="industry2" class="w100" /></td><td><input type="text" name="jobFunction2" class="w100" /></td><td><input type="text" name="startDateJob2" class="w100" /></td><td><input type="text" name="endDateJob2" class="w100" /></td>
</tr>
<tr>
    <td><input type="text" name="company3" class="w100" /></td><td><input type="text" name="jobTitle3" class="w100" /></td><td><input type="text" name="industry3" class="w100" /></td><td><input type="text" name="jobFunction3" class="w100" /></td><td><input type="text" name="startDateJob3" class="w100" /></td><td><input type="text" name="endDateJob3" class="w100" /></td>
</tr>
<tr>
    <td><input type="text" name="company4" class="w100" /></td><td><input type="text" name="jobTitle4" class="w100" /></td><td><input type="text" name="industry4" class="w100" /></td><td><input type="text" name="jobFunction4" class="w100" /></td><td><input type="text" name="startDateJob4" class="w100" /></td><td><input type="text" name="endDateJob4" class="w100" /></td>
</tr>

</table>

Here is the other table:

<table id="experiences-mirror" cellpadding="0" border="1" width="100%" height="100%">
     <tr><th>Company</th><th>Job Title</th><th>Industry</th><th>Job Function</th><th>Start Date</th><th>End Date</th></tr>
    <tr>
     <td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
     <td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
     <td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
     <td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
</table>
+1  A: 
var obj = {};
$('#experiences input').each(function () {
    obj[$(this).attr('name')] = $(this).val();
});

As for copying the values this should work.

// clone original table
var tab = $('#experiences').clone();

// change the id
tab.attr('id', 'experiences-mirror');

// replace inputs with corresponding values
tab.find('input').each(function() {
    var elem = $(this);
    elem.remove();
    elem.parent().text(elem.val());
});

// replace empty tab with filled one
$('#experiences-mirror').replaceWith(tab);
RaYell
@RaYell,I've changed my question.Sorry for the delay.
Shore
Check my updated answer.
RaYell
@RaYell,how to make it also apply when some <input> are changed to <select>,will tab.find('input|select') work?
Shore
thats another question...c'mon play the game...
redsquare
@Shore `tab.find('input,select')` will work
RaYell
@RaYell ,it works,ty:)
Shore
A: 

One option is to clone the table?

Below clones the table, changes the id and appends to someContainer

$('#experiences').clone()
                 .attr('id', 'experiences-mirror')
                 .appendTo('#someContainer');

See the clone help in the jquery docs

redsquare
no,the first table contains <input > in its cell,while the second contains plain text.So your code will not work,right?
Shore
then your question is wrong as you said the same structure, right:)
redsquare
c'mon, how hard is it to find the inputs, get the value into the cell and then remove the input....
redsquare