Question

我有一张桌子，想要更改data-admin =＆＃34; newvalue ＆＃34;的字段值。如果我只有这样的话怎么能这样做呢？表<tr> id =＆＃34; 67＆＃34; ？

首先，当我点击编辑按钮时，权利显示正确，0和2.按下＆＃34;点击更改＆＃34;按钮数据管理员值应该更改为零，但是当我再次按下编辑按钮时，它并没有真正改变。

我改变了第一个被认为是帖子的postet例子：Rory McCrossan。我希望现在更清楚了。

＆＃13;

var userid = 67;

$(document).ready(function() {
  // -----------------------------------------------------------------------
  $('#mytable').DataTable({
    "paging": false,
    "info": false
  });
  // -----------------------------------------------------------------------    
  $("#mytable").on('click', 'tbody tr button', function(e) {
    userid = $(this).attr('data-data');
    var username = $(this).closest('tr').children('td:eq(0)').text();
    var adminright = parseInt($(this).attr('data-admin'));

    $("#display").html("Number: " + userid + " / Username: " + username + " / Right: " + adminright);

    e.preventDefault();
  });
  // -----------------------------------------------------------------------      
  $("#myButton").bind("click", function(e) {

    $('#' + userid).find('button').data('admin', '1');
    var line = $('#mytable').dataTable().fnGetPosition(document.getElementById(userid));
    $('#mytable').dataTable().fnUpdate("Administrator", line, 1);

    e.preventDefault();
  });
});

＆＃13;

<link rel="stylesheet" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"/>

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>

<p id="display">INFO
  <p>
    <br>
    <button id="myButton" type="button" class="btn btn-xs btn-block btn-default">Click to change</button>
    <br>
    <table id="mytable" class="table table-striped table-hover table-condensed nowrap">
      <thead>
        <tr>
          <th>Username</th>
          <th>Right</th>
          <th>Last Login</th>
          <th>Count</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        <tr id="67">
          <td>Thomas</td>
          <td>User</td>
          <td>2015-12-14 11:03:45</td>
          <td>34</td>
          <td>
            <button id="select-btn" type="button" class="btn btn-xs btn-block btn-default" data-data="67" data-admin="2">Edit</button>
          </td>
        </tr>
        <tr id="82">
          <td>Peter</td>
          <td>User</td>
          <td>2014-03-26 08:51:55</td>
          <td>33</td>
          <td>
            <button id="select-btn" type="button" class="btn btn-xs btn-block btn-default" data-data="82" data-admin="0">Edit</button>
          </td>
        </tr>
      </tbody>
    </table>

＆＃13;

Answer 1

首先请注意，由于您使用了非标准属性并且重复id，因此您的HTML无效。如果您希望使用元素存储其他信息，请使用data-*属性。 id中document必须是唯一的<tbody> <tr id="67"> <td>first</td> <td>Administrator</td> <td>2015-12-14 11:03:45</td> <td>34</td> <td> <button type="button" class="select-btn btn btn-xs btn-block btn-default" data-data="123" data-admin="2">Edit</button> </td> </tr> <tr id="82"> <td>second</td> <td>User</td> <td>2014-03-26 08:51:55</td> <td>33</td> <td> <button type="button" class="select-btn btn btn-xs btn-block btn-default" data-data="852" data-admin="0">Edit</button> </td> </tr> </tbody>。要分组元素，请使用类。试试这个：

id

在此之前，您可以使用tr的{{1}}选择元素并在更改所需的button属性之前遍历data：

$('#67').find('button').data('admin', 'newvalue');

请注意，data()方法会影响存储在jQuery内部缓存中的值，并且不会明显影响DOM。

更改表tr td field =＆＃34; value＆＃34;

1 个答案: