Как найти значения одного tr, который выбран с помощью радиокнопки, и добавить эти данные к другому html? - PullRequest
0 голосов
/ 13 февраля 2020

Я работаю с 2 формами. С первой формой у меня есть некоторые динамические данные в таблице html.

<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>

Пользователь может выбрать одну строку с помощью переключателя, затем он можно нажать на одну кнопку. Пользователь кнопки onclick должен иметь возможность извлекать данные конкретной строки и добавлять их в другую таблицу html.

например, если пользователь щелкнет по второй строке с id = '2'. и он нажмет на кнопку:

<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>`
     });

Как я могу получить такие данные в js.

1 Ответ

0 голосов
/ 13 февраля 2020

Вы это, чтобы получить значение ваших строк ... В качестве примера, который требует очистки.

Возьмите значение переменной oneString. И вставьте это в ваш другой html элемент.

    $('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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...