Javascript将数据插入带有索引和数据的单元格答案

【问题标题】：Javascript inserting data into cell with index and dataJavascript将数据插入带有索引和数据的单元格
【发布时间】：2018-09-02 17:08:07
【问题描述】：

这看起来很简单，但我就是想不通。我正在尝试插入返回的数据并替换指定单元格索引处的单元格内容。我从函数调用的输入参数中获取数据 (Kevin) 和索引 (0)。但我只是无法将此数据插入所需的单元格。我已经尝试过insertCell 函数，但这不会替换内容，它只会继续添加新单元格。

我的 console.logs 报告了正确的索引和数据，我尝试像这样插入/替换单元格的内容：td[index].innerHTML = data 但这会产生错误，显然td[index] 返回一个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" );
        }
    }
});
}

有没有更简单的方法？

【问题讨论】：

我返回的是data，即Kevin。
我已经做了，它不是一个空字符串。当我这样做var tr = $('<tr>'); $('<td>').html(data).appendTo(tr); tbody.append(tr) 时，我在第一个索引中看到了正确的值。当我使用追加以这种方式执行此操作并从 html 中删除 <td> 和 <tr> 时，它可以工作。但我需要一种方法来使用我想要的索引值，而且我不能继续追加，它需要替换当前的单元格索引。
$('<td>').html(data) 非常危险，它可能会破坏一些东西。
@Sphinx 是的，但为什么它适用于append，而不适用于您建议的解决方案？对话框创建时数据还没有准备好？
这样就可以了。

标签： javascript jquery html html-table cells

【解决方案1】：

使用 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 */

【讨论】：

不应该是$('#data-row-body').find('td').eq(index).text(data)
谢谢你，但这不起作用:(所以我的td标签在按钮点击事件触发的对话框中。我想而不是替换定义的@987654325中的文本@我必须使用 insertCell 来创建一个新的td。

【解决方案2】：

用你当前的 sn-p 看看这是否有效

改变

var td = $('#data-table tbody td');

到

var td = $('#data-row-body').children('td');

$(td[index]).html(data);

这里，假设索引总是在

的范围内

【讨论】：

【解决方案3】：

行数可能很多，所以我为您的 APICallback 添加了一个参数。

以下是代码：

1.首先选择$('table tbody tr')$('table tbody tr')表格下的所有行

2.使用.eq(index)获取具体行

3. .find() all 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>

【讨论】：

谢谢你，但这不起作用:(所以我的 td 标签在按钮点击事件触发的对话框中。我认为我必须替换定义的 td 中的文本而不是改用 insertCell 创建一个新的 td。
啊，尝试了您修改后的解决方案，但仍然没有运气，我在想，当对话框被触发时，文本没有及时更新。

【解决方案4】：

使用以下函数向表格单元格添加内容。

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); 
    }

只需选择表格 ID、行号、单元格号和您要添加的内容。

用法：

add_content_to_cell('#my_table', 2, 5, "I am some content")

结果：

【讨论】：