我如何使用jquery使整行可提交？

dsf9zpds 于 2023-03-01 发布在 jQuery

关注(0)|答案(1)|浏览(87)

在下面的HTML页面中，根据从Flask应用程序传递的JSON数据动态创建了一个表。
每个表行都有一个提交按钮，用户看不到该按钮。
我想使整行都可单击，以便当用户单击表行的任何部分时，自动单击提交按钮。
我怎么能只使用jquery来实现呢？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="../static/css/jobs_table.css">
  <title>Protein Structure Analyzer</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
  <script type="text/javascript" src="../static/java_script/jobs_table.js"></script>
</head>
<body>
  <div class="menu-strip">
    <ul>
      <li><a href="{{ url_for('index') }}">Home</a></li>
      <li><a href="{{ url_for('jobs_table') }}">Jobs</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </div>
  <div class="angry-grid">
    <div class="header-div">Jobs Table</div>
    <div class="form-div">
      <form  method="post" >
        <table id="table1" class="table table-striped">
          <thead>
            <tr>
              <th>Job Key</th>
              <th>Project</th>
              <th>Input String</th>
              <th>Status</th>
              <th>Created At</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                <td>Job Key</td>
                <td>Project</td>
                <td>Input String</td>
                <td>Status</td>
                <td>Created At</td>
              </tr>
          </tbody>
        </table>        
      </form> 
    </div>
    <div class="footer-div">
      Footer  
    </div>
  </div>  
  <script type="text/javascript">    
    </script>
</body>
</html>

  // sending a connect request to the server.
    let socket = io.connect('/test');
    //on page load
    $(function(){
        socket.emit('first_connect_event', {
        'first_message' : 'Hello World!'
        });//send a message on page load

        socket.on('get_jobs_as_list', function (msg){
              let row_count = msg['rows'];
              let projects_json = $.parseJSON(msg['projects']);
              create_table(row_count, projects_json);
            });

        function create_table(row_count, json_users)
        {
            let table_body = $("#table1 tbody");
            table_body.empty();
            let markup = '';
            for(let i=0 ; i<row_count ; i++)
            {
                let buttonCaption = json_users[i]['unique_job_key']
                markup = "<tr>"
                        + "<td>" + json_users[i]['unique_job_key'] + "</td>"
                        + "<td>" + json_users[i]['user_name'] + "</td>"
                        + "<td>" + json_users[i]['protein_seq'] + "</td>"
                        + "<td>" + json_users[i]['is_done'] + "</td>"
                        + "<td>" + json_users[i]['created_at'] + "</td>"
                        + "<td style='display:none;'><input type='submit' name='submit_button1' value='"+buttonCaption+"'></td>"
                    +"</tr>";
                table_body.append(markup);
            }
            return 99;
        }
    });

jquery

来源：https://stackoverflow.com/questions/75543324/how-can-i-make-entire-row-submitable-using-jquery

1条答案

按热度按时间

ubof19bj1#

我不熟悉将<input>与[type="submit"]一起使用，尝试它并不适合我。
我将采取的方法是在每行中定义一个<form>，每行包含一个input[type="text"]。
然后，将一个委托事件侦听器附加到<tbody>，侦听<tr>的所有点击，处理程序将在点击的行中找到<form>并提交它。

const createRow = user => `
  <tr>
    <td>${user.unique_job_key}</td>
    <td>${user.user_name}</td>
    <td>${user.protein_seq}</td>
    <td>${user.is_done}</td>
    <td>${user.created_at}</td>
    <td style="display:none;">
      <form method="post">
        <input name="submit_button1" type="text" value="${user.unique_job_key}">
      </form>
    </td>
  </tr>
`;

const users = [
  {
    unique_job_key: 'Job 1',
    user_name: 'Alice',
    protein_seq: '123',
    is_done: false,
    created_at: Date.now()
  },
  {
    unique_job_key: 'Job 2',
    user_name: 'Bob',
    protein_seq: '246',
    is_done: true,
    created_at: Date.now()
  }
];

const $tbody = $('#table1 tbody');

$tbody.on('submit', 'form', function (event) {
  const $form = $(event.target);
  
  event.preventDefault();
  console.log('you have submitted the form');
  console.log($form.serialize());
});

$tbody.on('click', 'tr', function () {
  const $tr = $(this);
  const $form = $tr.find('form');
  
  $form.submit();
});

users.forEach(user => {
  $tbody.append(createRow(user));
});

table, td {
  border: 1px solid gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table1">
  <thead>
    <th>Unique Job Key</th>
    <th>User Name</th>
    <th>Protein Seq.</th>
    <th>Is Done?</th>
    <th>Created At</th>
    <th style="display:none;"></th>
  </thead>
  <tbody></tbody>
</table>

Here是小提琴上的代码。

赞(0）回复(0）举报 2023-03-01

我来回答

我如何使用jquery使整行可提交？

1条答案

相关问题

热门标签

最新问答