How to find values of one tr which is selected with radio button and append that data with another html?

Question

I am working with 2 forms.with first form I am having some dynamic data in html table.

<table id="main"><tr>
        <td><input type="radio" id="1"></td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr><tr>
        <td><input type="radio" id="2"></td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr><tr>
        <td><input type="radio" id="3"></td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
</table>

User can select one row with radio button then he can click on one button. onclick button user should be able to fetch particular row's data and append in another html table.

e.g if user will click on second row with id='2'. and he will click on button:

<input type="button id="acceptData">

$("#accpetData td").click(function() {
     // here I want data of second row.
     //and data to another table like `(.appenddata).html('<table><tr><td>6</td><td>7</td><td>8</td></tr></table>`
     });

How can I get this kind of data in js.

Do you want the user to select one value or all? EG, one row contains 2, 3, 4. You need to be a bit clearer... — Reena Verma, Feb 13 '20 at 18:40

Reena Verma · Accepted Answer · 2020-02-13T19:39:49.113

You this to get the value of your rows... As an example, which needs clearing up.

Take your oneString variable value. And inject that into your other html element.

    $('table#main').click(function(event){

        // Get the value of the element you have clicked
        var number = event.target.id;
        console.log(event.currentTarget.rows);
        var row = event.currentTarget.rows[number].innerText;

        // Use JavaScript object method to grab value
        var extractValues = Object.values(row);
        console.log(Object.values(row));
        console.log('extractValues', extractValues);

        // Turn array of strings into one string. And remove commas
        var oneString = extractValues.join().replace(/,/g, '');
        console.log('oneString', oneString);

    });

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="app.js"></script>
    <title>title</title>
  </head>
  <body>

    <table id="main"><tr>
        <td><input type="radio" id="0"></td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr><tr>
        <td><input type="radio" id="1"></td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr><tr>
        <td><input type="radio" id="2"></td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
</table>
  
  </body>
</html>

thanks @Reena . just one thing to know that how can I append this data to another
on particular onclick event — amit sutar, Feb 14 '20 at 02:36
if I select first row and then click on one button with onclick event and append whole 234 with another table in another file — amit sutar, Feb 14 '20 at 02:39
@amitsutar - I'm at work, but I will come back to you later this evening :) — Reena Verma, Feb 14 '20 at 09:55
You can try doing this: - Break down your variables and store them as separate variables. - Then, create your new table row via iQuery. - And you can append you variables wherever you'd like. See this stackover flow link as an example. (Just look at the solutions): https://stackoverflow.com/questions/46797771/jquery-append-to-html-table This is the solution, I'll explore for you later. — Reena Verma, Feb 14 '20 at 09:58

How to find values of one tr which is selected with radio button and append that data with another html?

1 Answers1