编辑表<td><input></td>中的值
编辑表<td><input></td>中的值
提问于 2020-09-01 19:32:46
this link image shows my data shown on a table from TCP server数据来自socket.io，它动态地显示在一个表中。我想编辑该表值，然后在单击表输入时通过TCP发送回我想要的输入标记。输入标记是可编辑的，然后通过套接字发送回TCP。
const net = require('net');
const client = new net.Socket();
client.connect(4000, '127.0.0.1', function() {
console.log('Connected to server .....');
});
client.setEncoding('utf8');
client.on('data', function(data) {
var strTable = "";
for(var i = 0; i < logReceived(data).length; i++) {
strTable += "<tr>"
for(var j = 0; j < logReceived(data)[i].length; j++) {
// console.log("in loop",logReceived(data)[i])
strTable += "<td>";
strTable += "<input type='number' class='form-control' value='"+logReceived(data)[i][j]+"'/>"
// strTable += logReceived(data)[i][j];
strTable += "</td>";
}
strTable += "</tr>";
}
$('#model_table').html(strTable);
}); <table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
<th scope="col">8</th>
</tr>
</thead>
<tbody id="model_table">
</tbody>
</table>
回答 2
Stack Overflow用户
发布于 2020-09-01 19:48:14
我认为一切都很好，但也许你忘记了动态html的语法。
请替换下面的代码。
strTable += "<input type=\"number\" class=\"form-control\" value=\""+logReceived(data)[i][j]+"\">"如果有任何问题，请检查并让我知道。
Stack Overflow用户
发布于 2020-09-01 19:55:32
您正在添加具有静态文本的表格行和单元格，则无法对其进行任何控制
这是我成功尝试过的示例代码
<!DOCTYPE html>
<html>
<head>
<script src="/media/js/jquery.min.js"></script>
<link rel="stylesheet" href="/media/css/bootstrap.min.css">
<script src="/media/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<input style="width: 100%" id="myresult"/>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
<th scope="col">8</th>
</tr>
</thead>
<tbody id="model_table"></tbody>
</table>
</body>
<script language="javascript">
$(document).ready(function(e) {
for (var i = 0; i < 10; i++) {
var strrow = $("<tr></tr>");
for (var j = 0; j < 8; j++) {
// console.log("in loop",logReceived(data)[i])
var strcol = $("<td></td>");
var myinput = $("<input type='number'></input>");
myinput.data("data-i", i);
myinput.data("data-j", j);
myinput.addClass('form-control').val(i + j);
myinput[0].onchange = function(ew){
var i1 = $(this).data('data-i');
var j1 = $(this).data('data-j');
var val = $(this).val();
$("#myresult").val(i1 + " , " + j1 + " , " + val);
};
strcol.append(myinput);
strrow.append(strcol);
}
$('#model_table').append(strrow);
}
});
</script>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63686824
复制相关文章
相似问题
腾讯云开发者
