允许用户将数据添加到表 jquery

Question

我需要用户将自己的数据输入到表中。这可能吗？

我希望有文本字段，用户可以在其中输入他们的 ID、分数等，然后当他们单击添加按钮时，他们的数据将包含在表格中。

（忽略每个ID上的超链接，暂时不用）。

代码（更新到我尝试过的）

<div data-role="main" class="ui-content">
    <div data-role="collapsible" data-collapsed="true">
         <h1>Top 10</h1>
        <button id="btn1">Add Scores</button>

<div data-role="fieldcontain">
    <label for="name">ID:</label>
    <input type="text" name="name" id="name" value=""  />
</div>  
<div data-role="fieldcontain">
    <label for="name">Score:</label>
    <input type="text" name="name" id="name" value=""  />
</div>  

<div data-role="fieldcontain">
    <label for="name">Course</label>
    <input type="text" name="name" id="name" value=""  />
</div>  



    <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
      <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>
        <tr>
          <th>1</th>
          <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">B</a></td>
          <td>Computing</td>
          <td><img src="tick.jpg"/></td>
          <td>229</td>
        </tr>
        <tr>
          <th>2</th>
          <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">B</a></td>
          <td>Network Computing</td>
          <td><img src="cross.jpg"/></td>
          <td>201</td>
        </tr>
        <tr>
          <th>3</th>
          <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">B</a></td>
          <td>Computer Forensics</td>
          <td><img src="tick.jpg"/></td>
          <td>194</td>
        </tr>
        <tr>
          <th>4</th>
          <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">B</a></td>
          <td>Computing</td>
          <td><img src="tick.jpg"/></td>
          <td>194</td>
        </tr>
        <tr>
          <th>5</th>
          <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">B</a></td>
          <td>Computing</td>
          <td><img src="cross.jpg"/></td>
          <td>159</td>
        </tr>
        <tr>
          <th>6</th>
          <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">B</a></td>
          <td>Computer Science</td>
          <td><img src="tick.jpg"/></td>
          <td>122</td>
        </tr>
        <tr>
          <th>7</th>
          <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">B</a></td>
          <td>ICT</td>
          <td><img src="tick.jpg"/></td>
          <td>122</td>
        </tr>
        <tr>
          <th>8</th>
          <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">B</a></td>
          <td>Computing</td>
         <td><img src="cross.jpg"/></td>
          <td>100</td>
        </tr>
        <tr>
          <th>9</th>
          <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">B</a></td>
          <td>ICT</td>
          <td><img src="tick.jpg"/></td>
          <td>85</td>
        </tr>
        <tr>
          <th>10</th>
          <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">B</a></td>
          <td>Computer Science</td>
          <td><img src="cross.jpg"/></td>
          <td>78</td>
        </tr>
      </tbody>
    </table>

  </div>

Answer 1

首先要做的事情。

您的输入必须具有不同/唯一的 ID/名称，例如：

Rank: <input type="text" name="ScoreRank" id="ScoreRank" value=""  />    
ID: <input type="text" name="ScoreId" id="ScoreId" value=""  />    
Course: <input type="text" name="ScoreCourse" id="ScoreCourse" value=""  />
Target: <input type="text" name="ScoreTarget" id="ScoreTarget" value=""  />    
Points: <input type="text" name="ScorePoints" id="ScorePoints" value=""  />    

考虑到这一点，您可以使用 jQuery 遍历输入并添加另一个表行...

$(document).ready(function(){
    $('#btn1').on('click',AddScore);
});

function AddScore()
{
    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);
}

正如你所问的，这里有一个工作小提琴。 Fiddle Solution

Answer 2

这是我的例子，虽然不像罗杰斯那么花哨。

http://jsfiddle.net/gv54s/

这里是一些示例，只是因为我不得不放它，请检查 jsfiddle。

$(document).ready(function(){
    $('#theform').submit(function(){

        // make remove button and event
        var but = $('<button>remove</button>').click(function(){
            $(this).parent().parent().remove();
        });
        // make button td
        var buttontd = $('<td></td>').append(but);

        // make row
        var tr = $('<tr><td>'+$('#1').val()+'</td><td>'+$('#2').val()+'</td><td>'+$('#3').val()+'</td></tr>').append(buttontd);

        // add row to table
        $('#thetable').append(tr);

        // return false so form is not submitted
        return false;
    });
});