0

I have a table on a form that is formatted like this:

 <table id='leaderTable'>
      <tbody>
            <tr>
                <td> Name1</td><td> item1</td><td> item2</td> <td> item3</td><td> item4</td><td> item5</td>               
    </tr>
            <tr>
                <td> Name2</td> <td> item1</td> <td> item2</td><td> item3</td><td> item4</td><td> item5</td>
    </tr>
    <tr>    
        <td> Name3</td> 

   -- etc. --

I search for and find a given Name in col-1 of this table, extract the data from cells to the right of that found Name, and copy them to a list in a textArea (id=leaderInfoArea).

Then I want to edit this text and copy it back to the original table, replacing the old data.

I've got the first part working and can extract the data to the textArea, but now I'm stuck and I don't know how to get it back to the table.

Here's how I'm extracting each record from the html table.

function getLeaderData() { // match the Pod Leader's entered name on the form (leaderName) against each cell in col-1 of leaderTable
    let leaderInfoArea = document.getElementById('leaderInfoArea') ;
    let leaderName = document.getElementById('leaderName').value.trim();
    leaderName = leaderName.toLowerCase();
    leaderName = leaderName.replace( '.' , ' ').replace(/  +/g, ' ');
    
    let tab = document.getElementById('leaderTable');
        let tabRows = tab.rows;
        for (let i = 0; i < tabRows.length; i++) {
        let leaderNameCell = tabRows[i].cells[0];
        let nextLeaderName = leaderNameCell.innerText.trim();
        nextLeaderName = nextLeaderName.toLowerCase();
        nextLeaderName = nextLeaderName.replace.( '.' , ' ').replace(/  +/g, ' ');
        if (leaderName === nextLeaderName) {  //  if the names match, copy the data for this Pod Leader into leaderInfoArea, and exit
            leaderInfoArea.value = "";
            for (let j = 0; j < tabRows[i].cells.length;  j++) {
                leaderInfoArea.value += tabRows[i].cells[j].innerText + "\r";
    }
    return;
        }
    }
}

leaderInfoArea now contains a list 6 lines high, although I can't get this editor to show that.

Name2 item1 item2 item3 item4 item5

Could someone please suggest how I can get this list back into the html table?

xltrader100
  • 1
  • 1
  • Why not edit the values in place, rather than copying, editing, copying back, going through all the requisite parsing steps that involves? – David Thomas Jan 09 '23 at 12:16
  • [link](https://stackoverflow.com/questions/6012823),You should try this – Yuvaraj M Jan 09 '23 at 12:52
  • It's unclear what are you trying to do. Why there is no `leaderInfoArea` and `leaderName` elements in html. What info do you want to put into table if it's the same info? – Nikita Skrebets Jan 09 '23 at 14:09
  • @David Thomas - I have to get the values out of the html table and in the clear where they can be edited. The modified list will be formatted for inclusion in an email, and then the modifications will be stuffed back into the table for future use. – xltrader100 Jan 09 '23 at 20:05
  • @Nikita Skrebets - this is a stripped down version of the code for brevity, and a lot of distractions were left out. Also, I'm not putting the same data back into the table, it will be changed data that's going back. Same number of items per Name, and each item will be the same length, but in general they'll be different numbers going back into the table as came out of it. – xltrader100 Jan 09 '23 at 20:15
  • @xltrader100 ok, but still it's unclear what should be done. You want to input text in a field, get the row with the same first column, copy the row data somewhere, edit it, put it back, separated by \r..? Why specifically \r? What will be if one of \r will be deleted? If the table would be excel-like, would it solve the problem? – Nikita Skrebets Jan 10 '23 at 13:12

0 Answers0