如何查找通过单选按钮选择的一个tr的值，并将该数据附加到另一个html上？

Question

我正在使用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中获取此类数据。

Answer 1

您通过此操作获取行的值...例如，需要清除：

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

    var number = event.target.id;
    console.log(event.currentTarget.rows);

    var row = event.currentTarget.rows[number].innerText;
    console.log(Object.values(row));

});

但是将ID更改为从0开始以使其更容易：

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