Javascript 将数据插入到包含索引和数据的单元格中
Javascript inserting data into cell with index and data
这看起来很简单,但我就是无法理解它。我正在尝试插入返回的数据并替换指定单元格索引处的单元格内容。我正在从函数调用的输入参数中获取数据 (Kevin
) 和索引 (0
)。但我无法将这些数据插入到所需的单元格中。我试过 insertCell
函数,但这不会替换内容,它只会继续添加新的单元格。
我的 console.logs 报告了正确的索引和数据,我试过 inserting/replacing 单元格的内容是这样的:td[index].innerHTML = data
但这给出了一个错误,显然 td[index]
returns一个object HTMLTableCellElement
,所以我不能这样做。
HTML:
<table>
...
<tbody>
<tr id="data-row-body">
<td></td> //need to insert here
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Javascript:
function exeAPI(api, key, index, callback) {
$.ajax({
url:"../lib/getData.php",
type: "POST",
data: {
name: name,
api: api
},
dataType: "text",
success:function(result){
console.log(result);
if(result){
try {
var jsonText = result.substr(result.indexOf('{'));
console.log("this is the jsontext: " + jsonText);
var jsonObj = JSON.parse(jsonText);
callback(jsonObj.response.result[key], index);
} catch(e) {
console.log(e);
alert("Error getting rack data!");
}
}
}
});
//getting back "Kevin" and "0" as parameters to insert here
function exeAPIcallback(data, index){
var td = $('#data-table tbody td');
var tr = $('#data-table tbody tr');
var row = document.getElementById("data-row-body");
console.log("This is the cell index: " + th[index].innerHTML + " ,index: " + th[index]);
console.log("This is the cell index: " + td[index]);
td[index].innerHTML = data; // this doesn't work
}
function popupParamChecker(){
exeAPI("getData.php", "Kevin", 0, exeAPIcallback);
$("#dialog-params").dialog({
resizable: false,
width: 1000,
modal: true,
draggable: false,
buttons: {
Confirm: function() {
$( this ).dialog( "close" );
}
}
});
}
有更简单的方法吗?
与jQuery:
$('#data-row-body').find('td').eq(index).text(data); /* strips down html, if any */
或
$('#data-row-body').find('td').eq(index).html(data); /* with html tags */
看看这是否适用于您当前的代码段
改变
var td = $('#data-table tbody td');</pre>
到
var td = $('#data-row-body').children('td');</pre>
$(td[index]).html(data);</pre>
这里,假设索引总是在
的范围内
行数可能很多,所以我为你的APICallback添加了一个参数。
代码如下:
1. 首先 select 我们在 table 下的所有行由 $('table tbody tr')
2.使用.eq(index)
获取特定行
3. .find()
所有tds 然后获取特定单元格以更改文本。
function exeAPIcallback1(data, row, col){
let td = $('table tbody tr').eq(row).find('td').eq(col);
td.text(td.text()+data)
}
function exeAPIcallback2(data, row, col){
$('table tbody tr').eq(row).find('td').eq(col).text(data);
}
table td{
width:10px;
height:10px;
border:1px;
background-color:yellow;
}
table td:nth-child(even){
background-color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="exeAPIcallback1('test',0,0)"> Test Insert</button>
<button onclick="exeAPIcallback2('test',0,0)"> Test Replace</button>
<table>
<tbody>
<tr id="data-row-body">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
使用以下 函数 将内容添加到 table 单元格。
function add_content_to_cell(table_selector, row_number, cell_number, content) {
$(table_selector).find('tr')
.eq(row_number-1).find('td').eq(cell_number-1)
.append(content);
}
只需选择 table ID、行号、单元格号和您要添加的内容。
用法:
add_content_to_cell('#my_table', 2, 5, "I am some content")
结果:
这看起来很简单,但我就是无法理解它。我正在尝试插入返回的数据并替换指定单元格索引处的单元格内容。我正在从函数调用的输入参数中获取数据 (Kevin
) 和索引 (0
)。但我无法将这些数据插入到所需的单元格中。我试过 insertCell
函数,但这不会替换内容,它只会继续添加新的单元格。
我的 console.logs 报告了正确的索引和数据,我试过 inserting/replacing 单元格的内容是这样的:td[index].innerHTML = data
但这给出了一个错误,显然 td[index]
returns一个object HTMLTableCellElement
,所以我不能这样做。
HTML:
<table>
...
<tbody>
<tr id="data-row-body">
<td></td> //need to insert here
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Javascript:
function exeAPI(api, key, index, callback) {
$.ajax({
url:"../lib/getData.php",
type: "POST",
data: {
name: name,
api: api
},
dataType: "text",
success:function(result){
console.log(result);
if(result){
try {
var jsonText = result.substr(result.indexOf('{'));
console.log("this is the jsontext: " + jsonText);
var jsonObj = JSON.parse(jsonText);
callback(jsonObj.response.result[key], index);
} catch(e) {
console.log(e);
alert("Error getting rack data!");
}
}
}
});
//getting back "Kevin" and "0" as parameters to insert here
function exeAPIcallback(data, index){
var td = $('#data-table tbody td');
var tr = $('#data-table tbody tr');
var row = document.getElementById("data-row-body");
console.log("This is the cell index: " + th[index].innerHTML + " ,index: " + th[index]);
console.log("This is the cell index: " + td[index]);
td[index].innerHTML = data; // this doesn't work
}
function popupParamChecker(){
exeAPI("getData.php", "Kevin", 0, exeAPIcallback);
$("#dialog-params").dialog({
resizable: false,
width: 1000,
modal: true,
draggable: false,
buttons: {
Confirm: function() {
$( this ).dialog( "close" );
}
}
});
}
有更简单的方法吗?
与jQuery:
$('#data-row-body').find('td').eq(index).text(data); /* strips down html, if any */
或
$('#data-row-body').find('td').eq(index).html(data); /* with html tags */
看看这是否适用于您当前的代码段
改变
var td = $('#data-table tbody td');</pre>
到
var td = $('#data-row-body').children('td');</pre>
$(td[index]).html(data);</pre>
这里,假设索引总是在
的范围内
行数可能很多,所以我为你的APICallback添加了一个参数。
代码如下:
1. 首先 select 我们在 table 下的所有行由 $('table tbody tr')
2.使用.eq(index)
获取特定行
3. .find()
所有tds 然后获取特定单元格以更改文本。
function exeAPIcallback1(data, row, col){
let td = $('table tbody tr').eq(row).find('td').eq(col);
td.text(td.text()+data)
}
function exeAPIcallback2(data, row, col){
$('table tbody tr').eq(row).find('td').eq(col).text(data);
}
table td{
width:10px;
height:10px;
border:1px;
background-color:yellow;
}
table td:nth-child(even){
background-color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="exeAPIcallback1('test',0,0)"> Test Insert</button>
<button onclick="exeAPIcallback2('test',0,0)"> Test Replace</button>
<table>
<tbody>
<tr id="data-row-body">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
使用以下 函数 将内容添加到 table 单元格。
function add_content_to_cell(table_selector, row_number, cell_number, content) {
$(table_selector).find('tr')
.eq(row_number-1).find('td').eq(cell_number-1)
.append(content);
}
只需选择 table ID、行号、单元格号和您要添加的内容。
用法:
add_content_to_cell('#my_table', 2, 5, "I am some content")
结果: