Question

很难以书面形式解释，所以我会附上一张照片

让我解释一下。如果你明白的话我真的很感激。

输入圆圈中检查的所有部件后，

单击选中的按钮时，

我想动态创建一个表，并以行和列的形式显示数据。

此时，我想知道的是，一旦第一次输入数据并点击按钮，

已创建。但是，从第二个输入开始，您应该阻止生成标记并实现它，以便仅将值添加到行和列中。

我一直在考虑实现这个功能，但作为初学者，我找不到答案。

如何实施它来实现我想要实现的内容？如果你能告诉我一点，我将不胜感激。

Answer 1

试试这个，这可能会对你有所帮助

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div data-role="main" class="ui-content">
    <div data-role="collapsible" data-collapsed="true">
         <h1>Top 10</h1>
       

<div data-role="fieldcontain">
    <label for="ScoreRank">Rank:</label>
    <input type="text" name="ScoreRank" id="ScoreRank" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScoreID">ID:</label>
    <input type="text" name="ScoreID" id="ScoreID" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScoreCourse">Course:</label>
    <input type="text" name="ScoreCourse" id="ScoreCourse" value=""  />
</div>  

<div data-role="fieldcontain">
    <label for="ScoreTarget">Target</label>
    <input type="text" name="ScoreTarget" id="ScoreTarget" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="ScorePoints">Points</label>
    <input type="text" name="ScorePoints" id="ScorePoints" value=""  />
</div>  

 <button id="btn1">Add Scores</button>
   <div class="table-responsive"> 
   <table data-role="table" id="table-column-toggle" data-mode="columntoggle" border="1" class="table table-hover" style="display:none;">
      <thead>
        <tr>
          <th data-priority="2">Rank</th>
          <th>Student ID</th>
          <th data-priority="3">Course</th>
          <th data-priority="1">Meeting negotiated target</th>
          <th data-priority="5">Score (pts)</th>
        </tr>
      </thead>

      <tbody>
        
      </tbody>
    </table>
</div>
  </div>
</div>
<script>
$(document).ready(function(){
    $('#btn1').on('click',AddScore);
});

  function AddScore()
  {
    $('#table-column-toggle').show();
    var jqTableBody = $('#table-column-toggle tbody');
    var sTRTemplate = '<tr>' + 
        '    <td>{Rank}</td>' +
        '    <td>{Id}</td>' +
        '    <td>{Course}</td>' +
        '    <td>{Target}</td>' +
        '    <td>{Points}</td>' +
        '</tr>';

    var sTRAppend = sTRTemplate;

    $('div[data-role="fieldcontain"] input:text').each(function(){
      switch(this.id) {
        case 'ScoreRank' :  sTRAppend = sTRAppend.replace('{Rank}', this.value); break;
        case 'ScoreID' :  sTRAppend = sTRAppend.replace('{Id}', this.value); break;
        case 'ScoreCourse' :  sTRAppend = sTRAppend.replace('{Course}', this.value); break;
        case 'ScoreTarget' :  sTRAppend = sTRAppend.replace('{Target}', this.value); break;
        case 'ScorePoints' :  sTRAppend = sTRAppend.replace('{Points}', this.value); break;
                    }
    })
    jqTableBody.append(sTRAppend);
  }
</script>

</body>
</html>

＆＃13;

如何动态标记输入数据？

1 个答案: