如何使用 StringBuilder 编辑动态创建的 HTML 表

Question

我使用 StringBuilder 创建了一个动态 HTML 表。但是当我试图将它的单元格值传递给 jQuery Ajax 调用时，我没有得到正确的值。聚焦后如何获取单元格值？

这里是确切的代码 sn-p：

Dim table as new StringBuilder()
For each item in strategy

table.AppendLine(String.Format(“<td>{0}</td>”,item.id);

table.AppendLine(“<td>{0}</td>”,item.price);

table.AppendLine(“<td contenteditable=“”true”” onfocusout =“SaveVal({0},{1})””>{1}</td>”,item.id, item.cellvalue );

Next

Return table.tostring ();

.aspx 文件中的 SaveVal Jquery 方法：

function SaveVal(id,cellvalue){
$.ajax({
type:"POST",
url:"Maintenance.aspx/SaveVal",
contentType:"application/json;charset=utf-8",
dataType:"json",
data: JSON.stringify({
ids: id,
val:cellvalue
}),
async:false,
success:function(response){
alert("Value Saved");
}
});
}

我想在聚焦后获取这个内容可编辑的单元格值。 SaveVal(id,cellvalue) 函数在 jQuery Ajax 调用中定义，我想传递这两个参数 id 和 cellvalue 这是单元格的最终值 - 如果没有编辑则现有值，如果我们编辑并输入新的value 然后新的值将被传递。

Answer 1

首先摆脱内联javascript，这不再是最佳实践。

接下来，为您的表指定一个 id 或其他标识方式（在我的示例中，我将使用“MyTable”的 id。

然后，正如您所指出的，jquery 正在使用中，我们将分配一个 jquery 事件处理程序。

vb.net

Dim table as new StringBuilder()
For each item in strategy

'give this an identifiyer to explicitly find it in jQuery/javascript
table.AppendLine(String.Format("<td data-id>{0}</td>",item.id);

table.AppendLine("<td>{0}</td>",item.price);

'no more inline javascript 
table.AppendLine("<td contenteditable=""true"">{1}</td>",item.id, item.cellvalue );

Next

Return table.tostring ();

jquery/javascript

$(document).ready(function(){
    /*Event handler for foucusout content edtitable cells in MyTable*/
    $("#MyTable [contenteditable=true]").on("focusout", function(){ 
       //Get ID
       let id = $(this).prevAll("[data-id]:first").text();
       //Get value of this cell
       let cellvalue = $(this).text();
       //Call your function, or just put its contents here
       SaveVal(id,cellvalue);
    });
});

function SaveVal(id,cellvalue){
  $.ajax({
    type:"POST",
    url:"Maintenance.aspx/SaveVal",
    contentType:"application/json;charset=utf-8",
    dataType:"json",
    data: JSON.stringify({
      ids: id,
      val:cellvalue
  }),
    async:false,
    success:function(response){
      alert("Value Saved");
    }
  });
}