在动态生成的表中创建单选按钮

Create radio button inside dynamic generated table

本文关键字:创建 单选按钮 动态      更新时间:2023-09-26

我在Ajax/Javascript中有这段代码,我正在生成一个动态表,该表应该包含一些返回值。在每行的开头,我希望有一列单选按钮,可以用来识别特定的行。如何在表中创建单选按钮?感谢

这是我的代码:

for (var i = 0; i < controller_data.length; i++) {
    tr = $('<tr/>');

    // this is the row where the radio button should be
    tr.append("<td> <input type="radio"> </td>");
    tr.append("<td>" + controller_data[i].id + "</td>");
    tr.append("<td>" + controller_data[i].question + "</td>");
    tr.append("<td>" + controller_data[i].image + "</td>");
    tr.append("<td>" + controller_data[i].answer1 + "</td>");
    tr.append("<td>" + controller_data[i].answer2 + "</td>");
    tr.append("<td>" + controller_data[i].answer3 + "</td>");
    tr.append("<td>" + controller_data[i].answer4 + "</td>");
    $('table').append(tr);
}

只做两行,它看起来像这样。。。

     tr.append("<td><input name='question1'  type='radio' value='" + controller_data[i].answer1  + "'/>"+ controller_data[i].answer1  + "</td>");
     tr.append("<td><input name='question1'  type='radio' value='" + controller_data[i].answer2  + "'/>"+ controller_data[i].answer2  + "</td>");

将raido按钮分组的是单选按钮名称。此外,你可以像我一样在单引号和双引号之间回到第四位,你不必做那么多的转义。此外,我把答案放在值中,但如果你有一个答案id,那实际上就是要放在那里的值。

您可以这样做。

只需移除double quotes并将其替换为single quotes,否则它将把radio视为变量

for (var i = 0; i < controller_data.length; i++) {
tr = $('<tr/>');

// this is the row where the radio button should be
//CHANGE BELOW
tr.append("<td> <input type='radio'> </td>");
tr.append("<td>" + controller_data[i].id + "</td>");
tr.append("<td>" + controller_data[i].question + "</td>");
tr.append("<td>" + controller_data[i].image + "</td>");
tr.append("<td>" + controller_data[i].answer1 + "</td>");
tr.append("<td>" + controller_data[i].answer2 + "</td>");
tr.append("<td>" + controller_data[i].answer3 + "</td>");
tr.append("<td>" + controller_data[i].answer4 + "</td>");
$('table').append(tr);

}