我正在尝试以编程方式修改单元格内容。
这是我向表中添加行的方式:
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
单元的内容,我无法弄清楚原因。
答案 0 :(得分:0)
我为您修理了一些东西
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
答案 1 :(得分:0)
第二个td的选择器,您应该执行td:nth-child(2)
以选择第二个td。
也请注意。 <table>
会自动在其下添加一个<tbody>
标记,因此您实际上应该做$('.table tbody').append(newRow)
。
答案 2 :(得分:0)
这是一个工作示例,您只需调用.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>
答案 3 :(得分:-1)
首先,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>