gpt4 book ai didi

javascript - 将按钮添加到循环生成的表中的表行

转载 作者:行者123 更新时间:2023-12-01 03:47:05 26 4
gpt4 key购买 nike

我有一个循环生成的表,它使用从数据库查询检索到的对象数组来填充其行。

这是生成表格的尾声

indices = ["razonSocial", "nombre1", "telefonoFijo1", "telefonoMovil1", "correoElectronico1", "clave"];
indiceBotones = ["id"];
var selectArray = [];
jQuery.each(returned.listaproveedorfamilia, function(i, val) {
selectArray.push({
"id": val.id,
"razonSocial": val.razonSocial,
"nombre1": val.nombre1,
"telefonoFijo1": val.telefonoFijo1,
"telefonoMovil1": val.telefonoMovil1,
"correoElectronico1": val.correoElectronico1,
"clave": val.clave
});
});

$.each(selectArray, function(i, selected) {
var tr = $('<tr>');
$.each(indices, function(i, indice) {
$('<td>').html(selected[indice]).appendTo(tr);
});
$.each(indiceBotones, function(i, indiceBoton){
//Here I need to add the code for the two buttons in the same cell
});
tbody.append(tr);
});

这就是表格的样子 This is how the table looks

我希望它在最后一列中有这样的按钮

Table with buttons

这是循环为每一行生成的代码示例

<tr>
<td>00020</td>
<td>00020</td>
<td>00020</td>
<td>00020</td>
<td>00020</td>
<td>PCR</td>
</tr>

在最后一个 td 之后,应添加包含以下标签的附加 td

<td>
<a title="Editar" href="<?php echo site_url('proveedor/edit/' HERE GOES THE VALUE OF THE ID selected[indiceBoton]); ?>" class="btn btn-info btn-xs"><span class="fa fa-pencil"></span></a>
<a title="Eliminar" href="<?php echo site_url('proveedor/remove/'HERE GOES THE VALUE OF THE ID selected[indiceBoton]); ?>" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
</td>

因此对于每一行,都应该创建以下代码

<tr>
<td>00020</td>
<td>00020</td>
<td>00020</td>
<td>00020</td>
<td>00020</td>
<td>PCR</td>
<td>
<a title="Editar" href="<?php echo site_url('proveedor/edit/' HERE GOES THE VALUE OF THE ID selected[indiceBoton]); ?>" class="btn btn-info btn-xs"><span class="fa fa-pencil"></span></a>
<a title="Eliminar" href="<?php echo site_url('proveedor/remove/'HERE GOES THE VALUE OF THE ID selected[indiceBoton]); ?>" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
</td>
</tr>

如何修改循环来生成这些标签?感谢您的帮助。

最佳答案

<强>1。动态 URL

由于您的 URL 将使用 JS 生成,因此您需要让它知道您的网站 URL 是什么。您可以在 JS 中对其进行硬编码,或者使其动态化,这样在切换域时它就不会中断。为此,您可以将其添加为第一个 <script> PHP 页面的 <head> 中的标记部分:

<script>window.SITE_ROOT = "<?php echo site_url('/'); ?>";</script>

它将创建一个全局变量,然后您的 JS 可以访问该变量。

<强>2。添加按钮

然后,您可以在代码中使用此变量:

$.each(indiceBotones, function(i, indiceBoton){
$('<td>').html(
'<a title="Editar" href="' + SITE_ROOT + 'proveedor/edit/' + selected[indiceBoton] + '">Edit</a> '
+ '<a title="Eliminar" href="' + SITE_ROOT + 'proveedor/remove/' + selected[indiceBoton] + '">Remove</a>'
).appendTo(tr);
});

<强>3。演示

查看下面的演示,了解一切应该如何工作:

// For the demo
var returned = {listaproveedorfamilia:[{id:1,name:"John"},{id:2,name:"Jessica"},{id:3,name:"Peter"},{id:4,name:"Harry"},{id:5,name:"Celia"}]},
tbody = $('table tbody');

// Nothing changed here, I just simplified the data structure for the demo
indices = ["name"];
indiceBotones = ["id"];
var selectArray = [];
jQuery.each(returned.listaproveedorfamilia, function(i, val) {
selectArray.push({
"id": val.id,
"name": val.name
});
});

$.each(selectArray, function(i, selected) {
var tr = $('<tr>');
$.each(indices, function(i, indice) {
$('<td>').html(selected[indice]).appendTo(tr);
});

// Here, we use the SITE_ROOT variable to create the links
$.each(indiceBotones, function(i, indiceBoton){
$('<td>').html(
'<a title="Editar" href="' + SITE_ROOT + 'proveedor/edit/' + selected[indiceBoton] + '">Edit</a> '
+ '<a title="Eliminar" href="' + SITE_ROOT + 'proveedor/remove/' + selected[indiceBoton] + '">Remove</a>'
).appendTo(tr);
});
tbody.append(tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The following line should be the first script loaded in the <head> section.
It will allow your JS script to know what the site root is.
This is the output of "echo site_url('/')": -->
<script>window.SITE_ROOT = "http://yoursite.com/";</script>

<table>
<thead>
<tr>
<th>Name</th>
<th>Options</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

关于javascript - 将按钮添加到循环生成的表中的表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43505310/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com