#javascript #jquery #html
#javascript #jquery #HTML
Вопрос:
Я создаю таблицу, в каждой строке есть кнопка, когда я нажимаю на нее, она показывает модальное окно, идея состоит в том, чтобы показать значения строки в модальном окне.
На данный момент:
- Получите строку (tr) таблицы, это нормально!
- Получить значения ячейки (td), это нормально!
- Получить имя атрибута ячейки (td) 😉
Пожалуйста, не могли бы вы помочь мне получить название ячеек?
Код:
$('#edit').on('show.bs.modal', function (event) {
var $button = $(event.relatedTarget) // Button that triggered the modal
var row = $button.closest("tr"), // edit button is in the same row as data you want to change
$tds = row.find("td"); // get all table cells in that row
$.each($tds, function(index,value) {
var input_name = $(this).attr("name"); // get name of cell we are evaluating (pagina, codigo, descripcion etc)
alert(input_name);
$([name='"' input_name '"']).val($(this).text()); //input name in the modal window
});
});
<table class='table-bordered' id='tableprod'
data-toggle='table'
data-toolbar='#toolbar'
data-show-refresh='true'
data-show-toggle='true'
data-sort-name='name'
data-sort-order='desc'
data-show-columns='true'
data-pagination='true'
data-search='true'>
<thead class='thead-inverse'>
<tr>
<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>
<th data-field='estado' data-switchable='false'></th>
<th data-field='edicion' data-sortable='true' data-visible='false'>EDICIÓ</th>
<th data-field='pagina' data-sortable='true'>PÀGINA</th>
<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>
<th data-field='image' data-switchable='false'>IMATGE</th>
<th data-field='descripcion-cat' data-sortable='true'>DESCRIPCIÓ CAT</th>
<th data-field='descripcion-esp' data-sortable='true'>DESCRIPCIÓ ESP</th>
<th data-field='marca' data-sortable='true'>MARCA</th>
<th data-field='gramaje' data-sortable='true'>GRAMATJE</th>
<th data-field='destacado' data-sortable='true' data-visible='false'>DESTACAT</th>
<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>
<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>
<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>
<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>
<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>
<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>
<th data-field='pvp-spar' data-sortable='true'>PVP-SPAR</th>
<th data-field='user' data-sortable='true' data-visible='false'>USER</th>
<th data-field='fecha-mod' data-sortable='true' data-visible='false'>FECHA-MOD</th>
<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
</tr>
</thead>
<tbody>
<?php while ($row = pg_fetch_row($result)){ ?>
<tr id='<?php echo $row[0]; ?>'>
<td></td>
<?php echo $estado = EstadoIcon($row[2]); ?>
<td name='edicion'><?php echo $row[1] ?></td>
<td data-pagina='pagina' name='pagina'><?php echo $row[3] ?></td>
<td name='codigo'><?php echo $row[0] ?></td>
<?php echo $imatge = AddImage($row[9]); ?>
<td name='descripcion-cat'><?php echo $row[5] ?></td>
<td name='descripcion-esp'><?php echo $row[4] ?></td>
<td name='marca'><?php echo $row[6] ?></td>
<td name='gramaje'><?php echo $row[7] ?></td>
<td name='destacado'><?php echo $row[8] ?></td>
<td name='pvp-cat'><?php echo $row[10] ?></td>
<td name='pvp-lev'><?php echo $row[11] ?></td>
<td name='pvp-and'><?php echo $row[12] ?></td>
<td name='pvp-cen'><?php echo $row[13] ?></td>
<td name='pvp-nor'><?php echo $row[14] ?></td>
<td name='pvp-vas'><?php echo $row[15] ?></td>
<td name='pvp-spar'><?php echo $row[16] ?></td>
<td name='user'><?php echo $row[17] ?></td>
<td name='fecha-mod'><?php echo $row[18] ?></td>
<td><button class='btn btn-xs edit btn-edit' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button></td>
</tr>
<?php } ?>
</tbody>
</table>
<div class="modal-body" id="editDetails">
<div class="container-fluid">
<input type="hidden" name="id" type="text"> <!-- hidden input for id -->
<div class="row">
<div class="col-md-2 descFields">
CODI
</div>
<div class="col-md-4">
<input class="form-control" name="codigo" type="text" placeholder="CODI">
</div>
<div class="col-md-6">
<input class="form-control" name="imagen" type="text" placeholder="IMATGE">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
EDICIÓ
</div>
<div class="col-md-4">
<input class="form-control" name="edicion" type="text" placeholder="EDICION">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
PÀGINA
</div>
<div class="col-md-4">
<input class="form-control" name="pagina" type="text" placeholder="EDICION">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
MODIF.
</div>
<div class="col-md-4">
<input class="form-control" name="fecha-mod" type="text" placeholder="FECHA MODIFICACIÓ">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
USER
</div>
<div class="col-md-4">
<input class="form-control" name="user" type="text" placeholder="USER">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
DESC. CAT
</div>
<div class="col-md-10">
<input class="form-control" name="descripcion-cat" type="text" placeholder="DESCRIPCIÓ CAT">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
DESC. ESP
</div>
<div class="col-md-10">
<input class="form-control" name="descripcion-esp" type="text" placeholder="DESCRIPCIÓ ESP">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
MARCA
</div>
<div class="col-md-10">
<input class="form-control" name="marca" type="text" placeholder="MARCA">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
GRAMATGE
</div>
<div class="col-md-10">
<input class="form-control" name="gramaje" type="text" placeholder="GRAMATGE">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
PVP-CAT
</div>
<div class="col-md-4">
<input class="form-control" name="pvp-cat" type="text" placeholder="PVP-CAT">
</div>
<div class="col-md-2 descFields">
PVP-LEV
</div>
<div class="col-md-4">
<input class="form-control" name="pvp-lev" type="text" placeholder="PVP-LEV">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
PVP-AND
</div>
<div class="col-md-4">
<input class="form-control" name="pvp-and" type="text" placeholder="PVP-AND">
</div>
<div class="col-md-2 descFields">
PVP-NOR
</div>
<div class="col-md-4">
<input class="form-control" name="pvp-nor" type="text" placeholder="PVP-NOR">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
PVP-SPAR
</div>
<div class="col-md-4">
<input class="form-control" name="pvp-spar" type="text" placeholder="PVP-SPAR">
</div>
<div class="col-md-2 descFields">
DESTACAT
</div>
<div class="col-md-4">
<input class="form-control" name="destacat" type="text" placeholder="DESTACAT">
</div>
</div>
</div>
</div>
Комментарии:
1.
alert(input_name)
работает?? вы получаете предупреждение?2. Ваша проблемная область
$([name='"' input_name '"'])
, похоже, должна быть$('[name="' input_name '"]')
3. В моем собственном приложении я использовал атрибуты data- * , они могут быть назначены переменным в jQuery для события примерно так;
var user = $(this).data("user");
где атрибут data;<td data-user="foo">
4. На самом деле с моим кодом окно предупреждения работает, но показывает сообщение «не определено». Теперь я проверю ваши советы.
5. @Sudhanshu Saxena да, это работает, но показывает предупреждающее сообщение «не определено».