редактировать значение в таблице

#javascript #html #jquery #node.js #websocket

#javascript #HTML #jquery #node.js #websocket

Вопрос:

это изображение ссылки показывает мои данные, отображаемые в таблице с сервера TCP данные поступают из сокета.ввод-вывод и он отображается в таблице динамически Я хочу отредактировать значения этой таблицы и отправить обратно через 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>

Ответ №1:

Я думаю, что все работает нормально, но, возможно, вы забыли синтаксис для динамического html.

Пожалуйста, замените приведенный ниже код.

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

Пожалуйста, проверьте и дайте мне знать, если возникнут какие-либо проблемы.

1. данные отображаются в таблице нормально, но они по-прежнему недоступны для редактирования, я хочу включить функциональность для редактирования этих данных и отправки их в сокет

Ответ №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>

1. входной тег по какой-то причине не доступен для просмотра

2. Я попробовал ваш код, и все входные данные были доступны для редактирования в таблице. Пожалуйста, найдите другие причины, такие как проблемы с браузером или ошибки консоли

3. Я нахожу, почему ввод не может щелкнуть. это в моем пользовательском CSS. когда я прокомментировал его работу, теперь я ХОЧУ, ЧТОБЫ ПРИ НАЖАТИИ НА ЛЮБОЙ ИЗ НИХ ЕГО ЗНАЧЕНИЕ МЕНЯЛОСЬ В ТОМ ЖЕ ИНДЕКСЕ И ОТПРАВЛЯЛОСЬ ЧЕРЕЗ СОКЕТ