将对话框表单数据附加为表中的新列

维杰·拉姆

#dialog-form包含两个单选按钮。从下拉对话框中选择“ Audi”值时，将出现一个表格。在选择“是”并单击“保存”后，我想将yes值作为新值td仅附加到我们选择值的行中，但此脚本将附加到所有行。

我也尝试使用$.closest tr它，但对我没有用。

$(document).ready(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Save": addUser,
            Cancel: function() {
                $("#dialog-form").dialog( "close" );
            }
        }
    });
    $(".d1").on('change', function() {
        if ($(this).val() == 'audi') {
            $("#dialog-form").dialog("open");
        }
    });

    function addUser(){
        var selected = $("#dialog-form input[type='radio']:checked");
        
        if(selected.length > 0 && selected.val() == "Yes") {
            $('.mainTable tr').append("<td>" + selected.val() + "</td>");
            $("#dialog-form").dialog("close");
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"
        integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
        crossorigin="anonymous"></script>
<table border="0" id="mainTable" class="mainTable">
    <tr>
        <td class="select">Online Password (Repeated)&nbsp;</td>
        <td><select name="D1" class="d1">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            </select></td>
        <!-- input textbox i want to disable-->
        <td><input type="text" value="" class="d2"></td>
    </tr>
    <tr>
        <td class="select">Online Password (Repeated)&nbsp;</td>
        <td><select name="D1" class="d1">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            </select></td>
        <td><input type="text" value="" class="d2"></td>
    </tr>
    <tr>
        <td class="select">Online Password (Repeated)&nbsp;</td>
        <td><select name="D1" class="d1">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            </select></td>
         <td><input type="text" value="" class="d2"></td>
    </tr>
    <tr></tr>
 </table>

 <div id="dialog-form">
     <form>
         <label for="name">Select smart safe Yes or No</label><br>
         <input type="radio" name="smart" value="Yes" checked> YES<br>
         <input type="radio" name="smart" value="No"> NO<br>
     </form>
 </div>

维杰·米什拉（Vijay Mishra）

您可以将所选选项分配给变量，然后采用最接近的“ tr”并在其中附加新的“ td”。

**var that = '';**
  $("#dialog-form").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
           "Save": addUser,
        Cancel: function() {
          $("#dialog-form").dialog( "close" );
        }
      }
            });
   $(".d1").on('change', function() {
   if ($(this).val() == 'audi') {
            **that = $(this);**
             $("#dialog-form").dialog("open");

                    }
                      }); 

    function addUser(){
    var selected = $("#dialog-form input[type='radio']:checked");

    if(selected.length > 0 && selected.val()=="Yes"){


        **that.closest("tr").append("<td>" + selected.val() + "</td>");**
        $("#dialog-form").dialog("close");
    }
    }

我还在https://jsfiddle.net/vkm193/uzrfy6q7/1/添加了jsfiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。