views:

220

answers:

2

Hi All,

I am stuck with a small problem here.. What i am trying to do is copy description of id's from one table to another. I have writter half of the javascript and can anybody tell me how to convert this function in jquery. I want the description copied from the first table based on the id to the second table. Have done this in jquery using 'contains', (http://stackoverflow.com/questions/2449845/comparing-2-tables-column-values-and-copying-the-next-column-content-to-the-secon) since there are 1000 table rows, the explorer crashes. Is there a way to simplify it ??... the code is as follows...

the current javascript works when i click on test in the second table, but i want the value to be appended in the second table on page load... pls help

<table class="reportTabe">
<tr><td>psx-pdu120v1</td><td class="itemname" id="psx-pdu120v1">some description1</td></tr>
<tr><td>psx-pdu120v1</td><td class="itemname" id="psx-pdu120v1">some description1</td></tr>
<tr><td>psx-pdu120v3</td><td class="itemname" id="psx-pdu120v3">some description3</td></tr>
<tr><td>psx-pdu120v4</td><td class="itemname" id="psx-pdu120v4">some description4</td></tr>
<tr><td>psx-pdu120v5</td><td class="itemname" id="psx-pdu120v5">some description5</td></tr>
<tr><td>psx-pdu120v6</td><td class="itemname" id="psx-pdu120v6">some description6</td></tr>
<tr><td>psx-pdu120v7</td><td class="itemname" id="psx-pdu120v7">some description7</td></tr>
<tr><td>psx-pdu120v8</td><td class="itemname" id="psx-pdu120v8">some description8</td></tr>
<tr><td>psx-pdu120v9</td><td class="itemname" id="psx-pdu120v9">some description9</td></tr>
</table>

<table class="data">
<tr><td class="whipItem">psx-pdu120v1</td><td onClick="Javascript:alert(document.getElementById('psx-pdu120v1').innerText)";>test</td></tr>
<tr><td class="whipItem">psx-pdu120v3</td><td onClick="Javascript:alert(document.getElementById('psx-pdu120v1').innerText)";>test</td></tr>
<tr><td class="whipItem">psx-pdu120v4</td><td onClick="Javascript:alert(document.getElementById('psx-pdu120v5').innerText)";>test</td></tr>
<tr><td class="whipItem">psx-pdu120v5</td><td Javascript:this.innerText=document.getElementById('psx-pdu120v4').innerText;></td></tr>
<tr><td class="whipItem">psx-pdu120v6</td><td Javascript:this.innerText=document.getElementById('psx-pdu120v5').innerText;></td></tr>
<tr><td class="whipItem">psx-pdu120v7</td><td Javascript:this.innerText=document.getElementById('psx-pdu120v6').innerText;></td></tr>
<tr><td class="whipItem">psx-pdu120v8</td><td Javascript:this.innerText=document.getElementById('psx-pdu120v7').innerText;></td></tr>
<tr><td class="whipItem">psx-pdu120v9</td><td Javascript:this.innerText=document.getElementById('psx-pdu120v8').innerText;></td></tr>
</table>
A: 
$(function() {

        $.each($('firstTable td'), function(i) {
            var tableData = $(this);
            $('.secondTable td').eq(i).text(tableData.text());
        });
    });
XGreen
@XGreen thanks... now the script tries to completely copy the value to the second table, but what i need is only for those names present in the first col of the second table, its adjacent description should be copied from the first table, ie 'psx-pdu120v3' in the second table should have the relevant description (some description3) copied from the first table
Sullan
A: 
$(document).ready(function() {
        $('.whipItem', '.data').each(function(index, element) { //for each whipItem in the data table
            var name = $(element).text(); //get the text value
            var desc = $(".itemname[id='" + name + "']").text(); //get the description whose id matches the name in the report table.
            $(element).next().text(desc); //change the value of the next td to the description.
        });
    });
Bradley Mountford
@Bradley Mountford thanks bradley.. worked like a charm.. now i'll try implementing in the bigger table and see if this script is slow or not. Between one thing what i found is, if there are two cols with "psx-pdu120v1" then in the second table for this col, the description is coming twice, when i added html() here var desc = $(".itemname[id='" + name + "']").html(); it was working fine, but will have a problem if the description contains and ambersand symbol :-)
Sullan
Glad I could help! As to the second issue, change $(".itemname[id='" + name + "']").text(); to var desc = $(".itemname[id='" + name + "']:first").text(); and that should end the doubling issue.
Bradley Mountford