Question

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>

Answer 1

我认为一切正常，但也许您忘记了动态html的语法。

请替换以下代码。

strTable += "<input type=\"number\" class=\"form-control\" value=\""+logReceived(data)[i][j]+"\">"

请检查并让我知道是否有问题。

Answer 2

您要添加带有静态文本的表格行和单元格，那么您将无法对其进行任何控制

这是我尝试成功的示例代码

<!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>

编辑表<td> <input> </td>中的值

2 个答案: