用jQuery在循环中更改bootstrap播放按钮值

Question

我正在尝试根据我从MySQL查询中获得的值来更改单选按钮的位置。该循环多次运行，并在每次迭代中创建一行。 我尝试过：

    $("#far_table tbody").sortable("disable");
    $("#far_table > tbody").empty();
    $.getJSON("gsffar.ajax.php", {
        function: 'update_far_table',
        Engnum: engnum,
        Type: type_toggle,
        Travid: travid
    })
    .done(function(data) {
        $(data).each(function()
        {
            $("#far_table").append('<tr> \
                                <td class="priority">' + this.priority + '</td> \
                                <td>' + this.attribute + '</td>\
                                <td>' + this.responsible + '</td> \
                                <td><div class="btn-group" id="pass_fail_group" data-toggle="buttons">\
                                    <label class="btn btn-primary active">\
                                        <input class="pass_fail" type="radio" name="options" id="pass" value="pass"> Pass\
                                    </label>\
                                    <label class="btn btn-primary" active>\
                                        <input class="pass_fail" type="radio" name="options" id="fail" value="fail" checked> Fail\
                                    </label>\
                                </div></td>\
                                <td><div class="input-group">\
                                <div class="custom-file">\
                                <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">\
                                </div>\
                                </div></td>\
                                </tr>');

            if (this.pass_fail === "pass"){
                $('input:radio[name="options"][value="pass"]').click();
            }else{
                $('input:radio[name="options"][value="fail"]').click();
            }
            
        });
    });
}

而且

function update_far_table_input(engnum, type_toggle, travid){
    $("#far_table tbody").sortable("disable");
    $("#far_table > tbody").empty();
    $.getJSON("gsffar.ajax.php", {
        function: 'update_far_table',
        Engnum: engnum,
        Type: type_toggle,
        Travid: travid
    })
    .done(function(data) {
        $(data).each(function()
        {
            var pass="";
            var fail="";
            if (this.pass_fail === "pass"){
                pass="checked";
            }else{
                fail="checked";
            }

            $("#far_table").append('<tr> \
                                <td class="priority">' + this.priority + '</td> \
                                <td>' + this.attribute + '</td>\
                                <td>' + this.responsible + '</td> \
                                <td><div class="btn-group" id="pass_fail_group" data-toggle="buttons">\
                                    <label class="btn btn-primary active">\
                                        <input class="pass_fail" type="radio" name="options" id="pass" value="pass" autocomplete="off" '+pass+'> Pass\
                                    </label>\
                                    <label class="btn btn-primary">\
                                        <input class="pass_fail" type="radio" name="options" id="fail" value="fail" autocomplete="off" '+fail+'> Fail\
                                    </label>\
                                </div></td>\
                                <td><div class="input-group">\
                                <div class="custom-file">\
                                <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">\
                                </div>\
                                </div></td>\
                                </tr>');
        });
    });
}

似乎两种方法似乎都起作用。我还想在将来添加第三个位置，因此能够按ID或值指定位置是理想的选择。

Answer 1

我发现打破标签的建筑物更容易。

在此片段中，我将附加新行，然后将其添加到表中，其中包含的div为“ jQueryable” 。

我正在使用您的数据来获得一些自由，但您应该能够获得它的要点。

请注意，html元素id的s应该是唯一的。

将此函数与包含重复ID的行一起用于占位符元素将是一个问题。

$("#far_table").append('<tr>\
  <td class="priority">' + this.priority + '</td> \
  <td>' + this.attribute + '</td>\
  <td>' + this.responsible + '</td> \
  <td>\
    <div class="btn-group" id="pass_fail_group" data-toggle="buttons">\
    </div>\
  </td>\
  <td>\
    <div class="input-group">\
      <div class="custom-file">\
        <input type="file" class="custom-file-input" \
        id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">\
      </div>\
    </div>\
  </td>\
</tr>');

buildRadios(document.getElementById('pass_fail_group'), 'options', ['pass', 'fail'], "pass")

function buildRadios(placeholderElem, groupname, valueArray, data_pf) {
  valueArray.forEach((e, i) => {
    let active = e === data_pf;

    const lbl = document.createElement('label');
    lbl.classList.add("btn", "btn-primary")
    if (active) {
      lbl.classList.add('active');
    }
    const radio = document.createElement('input');
    radio.id = e;
    radio.type = 'radio';
    radio.value = e;
    if (active) {
      radio.setAttribute("checked", "");
    }
    radio.name = groupname;
    radio.classList.add("pass_fail");

    lbl.appendChild(radio);
    let properCase = `${e.charAt(0).toUpperCase()}${e.slice(1).toLowerCase()}`
    lbl.appendChild(document.createTextNode(properCase));

    placeholderElem.appendChild(lbl)
  });
}

label.btn {
  white-space: nowrap !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="far_table" class="w-100"></table>