JQuery中的可编辑数据表来自for循环创建的固定表

时间:2014-11-24 10:41:22

标签: jquery twitter-bootstrap javascript

以下代码用于生成一个固定表,该表放在for循环中。此表将包含更多列,但只有10行。我想让这个表格可编辑。我找到了如何制作可编辑的数据表但我无法从该表到可编辑的表格,因此用户也可以输入/编辑参数。 这里table_rows_html是一个包含整个表结构的变量。现在我想让它可以编辑。

<script>$('#button').click(
            function displayEnterpriseSubscribers(selector) {
                var table_rows_html = '';
                for (var n = 0; n < 10; n++) {
                table_rows_html += '<tr>'
                + '<td>' + (n + 1) + '</td>'
                +'<td>Name</td>'
                + '<td>SIP</td>'
                + '<td>IMSI</td>'
                + '<td>Tel</td>'
                + '</tr>';
                }
                $("#table").append(table_rows_html)
            }
            ) </script>

我给的是用html体写的可编辑表格版本,并且有一些脚本行。如果有人能告诉我如何使上表可编辑,或者我如何使用以下示例使其可编辑,那会更好。如果有人可以帮助我,我会很高兴,因为我已经找了好几天。提前谢谢。

<link href="external/google-code-prettify/prettify.css" rel="stylesheet">
<link href="css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">

<div class='hero-unit'>

            <table id="mainTable" class="table table-striped">
            <thead><tr><th>Name</th><th>tel</th><th>SIP id</th><th>IMSI</th><th>number</th></tr></thead>
            <tbody>
              <tr><td>Joe</td><td>+491234567890</td><td>john\@example.com</td><td>1111111111</td><td>1</td></tr>
              <tr><td>Bob</td><td>+491234567890</td><td>bob\@example.com</td><td>1111111111</td><td>1</td></tr>
              <tr><td>Alice</td><td>+491234567890</td><td>alice\@example.com</td><td>1111111111</td><td>1</td></tr>
              <tr><td>Marley</td><td>+491234567890</td><td>marley\@example.com</td><td>1111111111</td><td>1</td></tr>
              <tr><td>Segway</td><td>+491234567890</td><td>segway\@example.com</td><td>1111111111</td><td>1</td></tr>
            </tbody>
          </table>
        </div>  




<script>
            $('#mainTable').editableTableWidget().numericInputExample().find('td:first').focus();
            $('#textAreaEditor').editableTableWidget({editor: $('<textarea>')});
            window.prettyPrint && prettyPrint();

            $('#mainTable').editableTableWidget({
            cloneProperties: ['background', 'border', 'outline']
            });
  </script>

0 个答案:

没有答案