Question

我正在尝试以编程方式修改单元格内容。

这是我向表中添加行的方式：

addLine(id) {
  var newRow = $('<tr id=' + this.id + '>');
  var cols = "";

  cols += '<td>' + name + '</td>';
  cols += '<td id=s>test</td>';

  newRow.append(cols);
  $(".table").append(newRow);
  this.id++;
}

这就是我尝试修改ID为0的行s上单元格的方式

//$(".table").find('tr#'+0).find('td:eq(1)').html("some other text");

这不会改变第二个td单元的内容，我无法弄清楚原因。

Answer 1

我为您修理了一些东西

addLine(id){
  var newRow = "<tr id="+id+">";
  var cols = "";

  cols += '<td>' + name + '</td>';
  cols += '<td>test</td>'; // you are always setting the same id. just leave it blank

  newRow.append(cols);

  newRow = "</tr>"; // tr tag needs to be closed

  $(".table").append(newRow);
  id++;
}

查询将是：

$('#'+searchId).children('td').eq(1).html("some other text"); //searchId = id of your row

Answer 2

第二个td的选择器，您应该执行td:nth-child(2)以选择第二个td。

也请注意。 <table>会自动在其下添加一个<tbody>标记，因此您实际上应该做$('.table tbody').append(newRow)。

Answer 3

这是一个工作示例，您只需调用.find('#' + id)即可找到所需行

var id = 0;
var name = "abcdef";

function addLine() {
  var newRow = $('<tr id=' + id++ + '>');
  var cols = "";

  cols += '<td>' + name + '</td>';
  cols += '<td id=s>test</td>';

  newRow.append(cols);
  $(".table").append(newRow);
}

function changeValue() {
  $(".table").find('#' + 1).find('td:eq(1)').html("some other text");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button onclick="addLine()">Add line </button>
<button onclick="changeValue()">Change Value </button>
<table class="table"></table>

Answer 4

首先，HTML ID和类不应以数字开头。使用jQuery，您无需为行和列分配ID。

还请注意，如果您添加的ID确保所有ID都是唯一的。

var id = 1;

function addLine() {
  var name = "Row " + id + " column 1";
  var newRow = $('<tr>');
  var cols = "";

  cols += '<td>' + name + '</td>';
  cols += '<td>test</td>';

  newRow.append(cols);
  $(".table").append(newRow);
  id++;
}

function changeCell(row, col) {
  $(".table").find('tr').eq(--row).find('td').eq(--col).html("some other text");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button onclick="addLine()">Add Line</button>
<!-- add two rows to change row 2 col 1 value -->
<button onclick="changeCell(2,1)">Change row 2 col 1</button>

<table class="table"></table>

jQuery修改特定表单元格上的值

4 个答案: