如何将动态单选按钮添加到jquery中动态创建的表中

Question

我想将单选按钮添加到动态创建的表中。这是我要添加动态创建的对象的HTML代码。

<div class="row container">
    <div class=" col m12 l6 s12" style="height:200px; overflow:scroll;">
        <table id="staff">

        </table>
    </div>
    <div class=" col m12 l6 s12" style="height:200px; overflow:scroll;">
        <table id="patient">

        </table>
    </div>
</div>

这里是网站的Jquery代码

 $.ajax({
     type: "POST",
     url: "/public/src/management/serverfile/selectstaffandpat.php",
     dataType: "text",
     error: function (request, error) {
         console.log(arguments);
         alert(" Can't do because: " + error);
     },
     success: function (JSONObject) {
         var peopleHTML = "";
         var tempjsonval = JSON.parse(JSONObject);
         var str1 = "<tr><th colspan=\"4\">Staff</th></tr><tr><th>Select</th><th>ID</th><th>FirstName</th><th>LastName</th></tr>";
         var count_staff = tempjsonval.staff.length;
         var count_patient = tempjsonval.patient.length;
         for (i = 0; i < count_staff; i++) {
             str1 += "<tr><td><input type=\"radio\" name=\"staff\" value=\"" +
                    tempjsonval.staff[i].s_id +
                    "staff\" ></input></td><td>" +
                    tempjsonval.staff[i].s_id +
                    "</td><td>" +
                    tempjsonval.staff[i].firstname +
                    "</td><td>" +
                    tempjsonval.staff[i].lastname +
                    "</td></tr>"
         }

         document.getElementById("staff").innerHTML = str1;

         str1 = "";
         str1 = " <tr><th colspan=\"3\">Patient</th></tr><tr><th>ID</th><th>FirstName</th><th>LastName</th></tr>";
         for (i = 0; i < count_patient; i++) {
             str1 += "<tr><td>" +
                    tempjsonval.patient[i].p_id +
                    "</td><td>" +
                    tempjsonval.patient[i].firstname +
                    "</td><td>" +
                    tempjsonval.patient[i].lastname +
                    "</td></tr>"
          }
          document.getElementById("patient").innerHTML = str1;
        }
    });
});

已创建输入，但未显示单选按钮。任何人都可以提供一种添加具有动态值的单选按钮的方法吗？this is the image where I am getting this output

Answer 1

请检查这一点是否需要将一些JSON数据更改为ajax响应数据。

Answer 2

$.ajax({
type: "POST",
url: "/public/src/management/serverfile/selectstaffandpat.php",
dataType: "text",
error: function (request, error) {
    console.log(arguments);
    alert(" Can't do because: " + error);
},
success: function (JSONObject) {
    var peopleHTML = "";
    var tempjsonval = JSON.parse(JSONObject);
    var str1 = `<tr><th colspan="4">Staff</th></tr>
                <tr>
                    <th>Select</th>
                    <th>ID</th>
                    <th>FirstName</th>
                    <th>LastName</th>
                </tr>`;

    var count_staff = tempjsonval.staff.length;
    var count_patient = tempjsonval.patient.length;
    for (i = 0; i < count_staff; i++) {
        str1 +=`<tr>
        <td><input type="radio" name="staff" value="${tempjsonval.staff[i].s_id} staff /></td>
        <td>${tempjsonval.staff[i].s_id}</td><td>
            ${tempjsonval.staff[i].firstname}</td>
            <td>${tempjsonval.staff[i].lastname}</td></tr>`}


    document.getElementById("staff").innerHTML = str1;

    str1 = "";

    str1 = `<tr>
            <th colspan="3">Patient</th>
            </tr>
            <tr>
            <th>ID</th>
            <th>FirstName</th>
            <th>LastName</th>
            </tr>`;
    for (i = 0; i < count_patient; i++) {
        str1 +=`<tr>
        <td>${tempjsonval.patient[i].p_id}</td>
        <td>${tempjsonval.patient[i].firstname}</td>
        <td>${tempjsonval.patient[i].lastname}</td>
        </tr>`
    }
    document.getElementById("patient").innerHTML = str1;

}