Home / Questions / 187007
Accepted
Santiago
Asked: 2020-08-08 14:26:06 +0800 CST 2020-08-08 14:26:06 +0800 CST

使用来自模态的数据向表中添加行

  • 772

如果您可以帮助我解决如何将模式中的表单填充的数据传递到表格中的新行的问题。并且每次打开模式以填充表单时它都会累积，以及删除该行的选项。

这是我的模态。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="myForm" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true"></span></button>
                    <h4 class="modal-title" id="myModalLabel">Agregar accion a Clientecentrico</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label>Tipo:</label>
                    </div>
                    <div class="form-group">
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="70 - Experiencia">70 - Experiencia
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="20 - Trabajo con otros">20 - Trabajo con otros
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="10 - Formación formal">10 - Formación formal
                        </label>
                    </div>
                    <br>
                    <div class="form-group">
                        <textarea id="comentarios" required="required" rows="5"
                                  class="form-control" name="message"
                                  data-parsley-trigger="keyup"
                                  data-parsley-minlength="20"
                                  data-parsley-maxlength="1000"
                                  data-parsley-minlength-message="Come on! You need to enter at least a 20 caracters long comment.."
                                  data-parsley-validation-threshold="10" placeholder="Accion."></textarea>
                    </div>
                    <div class="form-group">
                        <label>Fecha fin:</label>
                        <div class='input-group date' id='myDatepicker'>
                            <input type='text' id="fecha_final" class="form-control"/>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>                        
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal" onclick="myFunction()">
                        Cerrar
                    </button>
                    <button type="button" class="btn btn-primary">Crear</button>
                </div>
            </form>
        </div>
    </div>
</div>

桌子是这样的

<table id="tabla-acciones" class="table table-bordered">
<thead>
<tr>
    <th>Tipo</th>
    <th>Accion</th>
    <th>Fecha fin</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>

这是我正在尝试的脚本

$('#crearAccion').click(function () {
var tipo = $('#optradio').val();
var accion = $('#comentarios').val();
var fechafin = $('#fecha_final').val();

$('table tbody').append('<tr><td>' + tipo + '</td><td>' + accion + '</td><td>' + fechafin + '</td></tr>');
});
javascript

1 Answers

  1. Best Answer

    您需要两个不同的按钮，一个用于显示模式，然后在您接受时添加该行。像这样的东西：

    $('#crearAccion').click(function () {
  var tipo = $('input[name="optradio"]:checked').val();
  var accion = $('#comentarios').val();
  var fechafin = $('#fecha_final').val();

  $('table tbody').append('<tr><td>' + tipo + '</td><td>' + accion + '</td><td>' + fechafin + '</td></tr>');
  $("#myModal").modal('hide');
});
$('#crear').click(function () {
  $("#myModal").modal();
});
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="myForm" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true"></span></button>
                    <h4 class="modal-title" id="myModalLabel">Agregar accion a Clientecentrico</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label>Tipo:</label>
                    </div>
                    <div class="form-group">
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="70 - Experiencia">70 - Experiencia
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="20 - Trabajo con otros">20 - Trabajo con otros
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optradio" value="10 - Formación formal">10 - Formación formal
                        </label>
                    </div>
                    <br>
                    <div class="form-group">
                        <textarea id="comentarios" required="required" rows="5"
                                  class="form-control" name="message"
                                  data-parsley-trigger="keyup"
                                  data-parsley-minlength="20"
                                  data-parsley-maxlength="1000"
                                  data-parsley-minlength-message="Come on! You need to enter at least a 20 caracters long comment.."
                                  data-parsley-validation-threshold="10" placeholder="Accion."></textarea>
                    </div>
                    <div class="form-group">
                        <label>Fecha fin:</label>
                        <div class='input-group date' id='myDatepicker'>
                            <input type='text' id="fecha_final" class="form-control"/>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>                        
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default" data-dismiss="modal">
                        Cerrar
                    </button>
                    <button id="crearAccion" type="button" class="btn btn-primary">Crear</button>
                </div>
            </form>
        </div>
    </div>
</div>

<button data-toggle="myModal" id="crear">Crear</button>
<table id="tabla-acciones" class="table table-bordered">
<thead>
<tr>
    <th>Tipo</th>
    <th>Accion</th>
    <th>Fecha fin</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>

    • 2