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

Question

#dialog-form包含两个单选按钮。从下拉对话框中选择“奥迪”值时，将出现一个表格。选择“是”并单击“保存”时，我希望将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>

Answer 1

以下是我的评论

的解决方案

init(){
  console.log(this.model); // IS NULL
}

jsfiddle

Answer 2

您可以将所选选项分配给变量，然后选择最近的＆＃34; tr＆＃34;并追加新的＆＃34; td＆＃34;进入它。

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

Answer 3

看看这个：

＆＃13;

＆＃13;

  $(document).ready(function() {
  var selectElement;
  $("#dialog-form").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
        Save: function() {
          var selected = $("#dialog-form input[type='radio']:checked");
          if(selected.length > 0 && selected.val()=="Yes"){
              selectElement.closest("tr").append("<td>" + selected.val() + "</td>");
          }
          $("#dialog-form").dialog( "close" );
        },
        Cancel: function() {
          $("#dialog-form").dialog( "close" );
        }
      }
            });
   $(".d1").on('change', function() {
      selectElement = $(this);
   		if ($(this).val() == 'audi') {
      		$("#dialog-form").dialog("open");
      }
   }); 

    function addUser(){
   
    }
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></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>
      <td>
        <input type="text" value="" class="d2">
        <!-- above is the input textbox i want to disable-->
      </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>

＆＃13;

＆＃13;

＆＃13;