如何在表格的每一行添加“Id”
我有一个加载了Ajax数据的表（调用如下所示）：
success: function (data) {
var aRC = JSON.parse(data.d);
var line = "";
for (var i = 0; i < aRC.length; i++) {
var id = aRC[i].Id;
var num = id;
var rev = aRC[i].field;
lines += '<tr id="V' + num + '" data-id="' + num + '">';
lines += '<td>' + num + '</td>';
lines += '<td id="V' + num + '-1">' + rev + '</td>';
lines += '<td class="text-center">';
lines += ' <span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="' + num + '"></span>';
lines += ' <span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="' + num + '"></span>';
lines += ' </td>';
lines += '</tr>';
}
$('#TableVS').html(lines);
这是Ajax调用后我的页面的样子：
当我点击编辑范围时，输入值流会自动填充行数据，当我点击删除范围时，DataTables会提示我弹出窗口以确认删除该行。我的问题源于我在点击编辑/删除范围时尝试加载行ID。
问题
数据已正确加载到我的DataTable中，但问题是当我点击跨度时，没有任何反应。我相信这是因为我没有为每一行分配ID，我想知道怎么做？
这是我从输入
加载数据的代码function editarDatosVs(id) {
if ($('#V' + id).length) {
var id = $('#V' + id).attr('data-id');
$('#IdVs').val(id);
var rev = $('#V' + id + '-1').html();
$('#vs').val(rev);
}
else {
$('#IdVs').val('0');
$('#vs').val('');
}
}
3 个答案:
答案 0 :(得分：0)
给出一个具有类似结构的表：
<div class="container">
<input type="text" id="id"/>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Nixon</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="1"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="1"></span>
</td>
</tr>
<tr>
<td>2</td>
<td>Garrett Winters</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="2"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="2"></span>
</td>
</tr>
<tr>
<td>3</td>
<td>Ashton Cox</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="3"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="3"></span>
</td>
</tr>
<tr>
<td>4</td>
<td>Cedric Kelly</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="4"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="4"></span>
</td>
</tr>
<tr>
<td>5</td>
<td>Airi Satou</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="5"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="5"></span>
</td>
</tr>
<tr>
<td>6</td>
<td>Brielle Williamson</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="6"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="6"></span>
</td>
</tr>
<tr>
<td>7</td>
<td>Herrod Chandler</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="7"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="7"></span>
</td>
</tr>
<tr>
<td>8</td>
<td>Rhona Davidson</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="8"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="8"></span>
</td>
</tr>
<tr>
<td>9</td>
<td>Colleen Hurst</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="9"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="9"></span>
</td>
</tr>
<tr>
<td>10</td>
<td>Sonya Frost</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="10"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="10"></span>
</td>
</tr>
<tr>
<td>11</td>
<td>Jena Gaines</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="11"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="11"></span>
</td>
</tr>
<tr>
<td>12</td>
<td>Quinn Flynn</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="12"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="12"></span>
</td>
</tr>
<tr>
<td>13</td>
<td>Charde Marshall</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="13"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="13"></span>
</td>
</tr>
<tr>
<td>14</td>
<td>Haley Kennedy</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="14"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="14"></span>
</td>
</tr>
<tr>
<td>15</td>
<td>Tatyana Fitzpatrick</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="15"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="15"></span>
</td>
</tr>
<tr>
<td>16</td>
<td>Michael Silva</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="16"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="16"></span>
</td>
</tr>
<tr>
<td>17</td>
<td>Paul Byrd</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="17"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="17"></span>
</td>
</tr>
<tr>
<td>18</td>
<td>Gloria Little</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="18"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="18"></span>
</td>
</tr>
<tr>
<td>19</td>
<td>Bradley Greer</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="19"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="19"></span>
</td>
</tr>
<tr>
<td>20</td>
<td>Dai Rios</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="20"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="20"></span>
</td>
</tr>
<tr>
<td>21</td>
<td>Jenette Caldwell</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="21"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="21"></span>
</td>
</tr>
<tr>
<td>22</td>
<td>Yuri Berry</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="22"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="22"></span>
</td>
</tr>
<tr>
<td>23</td>
<td>Caesar Vance</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="23"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="23"></span>
</td>
</tr>
<tr>
<td>24</td>
<td>Doris Wilder</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="24"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="24"></span>
</td>
</tr>
<tr>
<td>25</td>
<td>Angelica Ramos</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="25"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="25"></span>
</td>
</tr>
<tr>
<td>26</td>
<td>Gavin Joyce</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="26"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="26"></span>
</td>
</tr>
<tr>
<td>27</td>
<td>Jennifer Chang</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="27"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="27"></span>
</td>
</tr>
<tr>
<td>28</td>
<td>Brenden Wagner</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="28"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="28"></span>
</td>
</tr>
<tr>
<td>29</td>
<td>Fiona Green</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="29"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="29"></span>
</td>
</tr>
<tr>
<td>30</td>
<td>Shou Itou</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="30"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="30"></span>
</td>
</tr>
<tr>
<td>31</td>
<td>Michelle House</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="31"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="31"></span>
</td>
</tr>
<tr>
<td>32</td>
<td>Suki Burks</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="32"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="32"></span>
</td>
</tr>
<tr>
<td>33</td>
<td>Prescott Bartlett</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="33"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="33"></span>
</td>
</tr>
<tr>
<td>34</td>
<td>Gavin Cortez</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="34"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="34"></span>
</td>
</tr>
<tr>
<td>35</td>
<td>Martena Mccray</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="35"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="35"></span>
</td>
</tr>
<tr>
<td>36</td>
<td>Unity Butler</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="36"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="36"></span>
</td>
</tr>
<tr>
<td>37</td>
<td>Howard Hatfield</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="37"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="37"></span>
</td>
</tr>
<tr>
<td>38</td>
<td>Hope Fuentes</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="38"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="38"></span>
</td>
</tr>
<tr>
<td>39</td>
<td>Vivian Harrell</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="39"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="39"></span>
</td>
</tr>
<tr>
<td>40</td>
<td>Timothy Mooney</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="40"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="40"></span>
</td>
</tr>
<tr>
<td>41</td>
<td>Jackson Bradshaw</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="41"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="41"></span>
</td>
</tr>
<tr>
<td>42</td>
<td>Olivia Liang</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="42"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="42"></span>
</td>
</tr>
<tr>
<td>43</td>
<td>Bruno Nash</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="43"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="43"></span>
</td>
</tr>
<tr>
<td>44</td>
<td>Sakura Yamamoto</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="44"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="44"></span>
</td>
</tr>
<tr>
<td>45</td>
<td>Thor Walton</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="45"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="45"></span>
</td>
</tr>
<tr>
<td>46</td>
<td>Finn Camacho</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="46"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="46"></span>
</td>
</tr>
<tr>
<td>47</td>
<td>Serge Baldwin</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="47"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="47"></span>
</td>
</tr>
<tr>
<td>48</td>
<td>Zenaida Frank</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="48"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="48"></span>
</td>
</tr>
<tr>
<td>49</td>
<td>Zorita Serrano</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="49"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="49"></span>
</td>
</tr>
<tr>
<td>50</td>
<td>Jennifer Acosta</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="50"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="50"></span>
</td>
</tr>
<tr>
<td>51</td>
<td>Cara Stevens</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="51"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="51"></span>
</td>
</tr>
<tr>
<td>52</td>
<td>Hermione Butler</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="52"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="52"></span>
</td>
</tr>
<tr>
<td>53</td>
<td>Lael Greer</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="53"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="53"></span>
</td>
</tr>
<tr>
<td>54</td>
<td>Jonas Alexander</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="54"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="54"></span>
</td>
</tr>
<tr>
<td>55</td>
<td>Shad Decker</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="55"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="55"></span>
</td>
</tr>
<tr>
<td>56</td>
<td>Michael Bruce</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="56"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="56"></span>
</td>
</tr>
<tr>
<td>57</td>
<td>Donna Snider</td>
<td>
<span class="btn btn-success btn-xs glyphicon glyphicon-edit" data-id="57"></span>
<span class="btn btn-danger btn-xs glyphicon glyphicon-remove" data-id="57"></span>
</td>
</tr>
</tbody>
</table>
</div>
此代码似乎可以满足您的需求：
var table = $('#example').DataTable({
});
$('#example').on("click", ".glyphicon-remove", function(){
$("#id").val($(this).data("id"));
});
如果我误解了你的要求，请说但是我认为这就是你之后的事情？工作JSFiddle。
答案 1 :(得分：0)
将sClass索引添加到id列
var updateIndex = function(){
$( this ).find('tr').each(function(){
$( this ).find( "td.index" ).html( $(this).index()+1);
});
};
updateIndex.call(Table);//table is the datatable reference
在插入或删除行
后调用此方法答案 2 :(得分：0)
添加Rory所说的，在数据表设置中调用rowcallback中的函数并扩展此函数。然后将数据表设置回数据格式div。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？