Question

所以，这是我的表

<table>
 <tr>
  <td><input type="checkbox" id="cb1"></td>
  <td class="cn">a1<td>
  <td>b1<td>
  <td>c1<td>
 </tr>
 <tr>
  <td><input type="checkbox" id="cb2"></td>
  <td class="cn">a1<td>
  <td>b1<td>
  <td>c1<td>
 </tr>
 <tr>
  <td><input type="checkbox" id="cb3"></td>
  <td class="cn">a1<td>
  <td>b1<td>
  <td>c1<td>
 </tr>
</table>

弹出代码：

<label>Line Number</label>
<input type="text"  id="line-no">
<button type="button"  id="update">Update</button>

当我选择任何行并在我创建的弹出窗口上输入并单击更新时，我想用id＆＃34; cn＆＃34;更改表格数据。进入我在弹出窗口中为相应的已检查行提供的输入。所有这些都使用jquery。

Answer 1

请检查

var checkedRows = [];

$('#eventsTable').on('check.bs.table', function (e, row) {
  checkedRows.push({id: row.id, name: row.name, forks: row.forks});
  console.log(checkedRows);
});

$('#eventsTable').on('uncheck.bs.table', function (e, row) {
  $.each(checkedRows, function(index, value) {
    if (value.id === row.id) {
      checkedRows.splice(index,1);
    }
  });
  console.log(checkedRows);
});

$("#add_cart").click(function() {
  $("#output").empty();
  $.each(checkedRows, function(index, value) {
    $('#output').append($('<li></li>').text(value.id + " | " + value.name + " | " + value.forks));
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>

<table id="eventsTable"
       data-toggle="table"
       data-height="300"
       data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
       data-pagination="true"
       data-search="true"
       data-show-refresh="true"
       data-show-toggle="true"
       data-show-columns="true"
       data-toolbar="#toolbar">
    <thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="name">Name</th>
        <th data-field="stargazers_count">Stars</th>
        <th data-field="forks_count">Forks</th>
        <th data-field="description">Description</th>
    </tr>
    </thead>
</table>

<button id="add_cart">Add to card</button>
<ul id="output"></ul>

Answer 2

请尝试以下Js：

$("#update").click(function(){
  $("table").find("input[type=checkbox]").each(function(){
    if($(this).is(':checked')==true){
      var txt_value = $("#line-no").val();
      if(txt_value != ""){
          $(this).closest("tr").find("td.cn").text(txt_value);
      }

    } 
  });
});

请检查Html是否有更改ID到类：

<table>
 <tr>
  <td><input type="checkbox"id="cb1"></td>
  <td class="cn">a1<td>
  <td>b1<td>
  <td>c1<td>
 </tr>
 <tr>
  <td><input type="checkbox" id="cb2"></td>
  <td class="cn">a2<td>
  <td>b2<td>
  <td>c2<td>
 </tr>
 <tr>
  <td><input type="checkbox" id="cb3"></td>
  <td class="cn">a3<td>
  <td>b3<td>
  <td>c3<td>
 </tr>
</table>
<label>Line Number</label>
<input type="text"  id="line-no">
<button type="button"  id="update">Update</button>

如何使用jquery更改选中行上的表数据

2 个答案: