7

我有一个页面，人们可以在其中输入名字/姓氏、电话、电子邮件和种族，单击添加，它会在数据表中添加一个条目。问题是单击添加后，表格显示如下：

桌子

如何调整每行的高度以使其正确显示。这是我的表格的 html 代码：

<div id="table">
    <form id="add_nrow" title="Add">
        <br/>
        <label for="name">First Name</label><input type="text" name="fname" id="fname" class="required" rel="0" />
        <br />
        <label for="name">Last Name</label><input type="text" name="lname" id="lname" rel="1" />
        <br />
        <label for="name">Phone</label><input type="text" name="phone" id="phone" rel="3" />
        <br />
        <label for="name">Email</label><input type="text" name="email" id="email" rel="4" />
        <br />
        <label for="name">Ethnicity</label><input type="text" name="ethnicity" id="ethnicity" rel="5" />
        <br />   
        <input type="button" value="Add" id="addbtn" /><br/><br/>  
    </form>

    <table id="reg_more" border="1">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Ethnicity</th>
            </tr>
        </thead>
    </table>
</div>

这是我的jQuery代码

$("#addbtn").click(addrow);
$('#reg_more').dataTable({
                "bLengthChange": false,
                "bInfo": false,
                "bPaginate": false,
                "bStateSave": true,
                "rowHeight": 'auto',
                "bFilter": true,
                "bSort": false,
                "bAutoWidth": false
            });


function addrow() {
    $('#reg_more').dataTable().fnAddData( [
        $('#fname').val(),
        $('#lname').val(),
        $('#phone').val(),
        $('#email').val(),
        $('#ethnicity').val()] );
    }

我真的有两个问题：

  1. 如何正确调整高度以便用户可以看到数据？
  2. 如果输入 20 个人的信息，我如何将所有这些数据输入到 mysql 数据库中？
4

2 回答 2

6

正如您在这个小提琴中看到的那样，您的代码是正确的，应该可以按预期工作。

无论如何设置行高，只需使用 css

 tr { height: 50px }

我认为没有必要更复杂。

关于如何将数据插入数据库的问题，google上有大量示例。

于 2012-09-16T13:14:20.553 回答
1

这是一个老问题，但如果你像我一样不想在 CSS 中这样做，你可以在 1.10 或更高版本中使用drawCallback来使用 JS 更改表格单元格填充和/或高度。

var import_list = $( 'table.import_list' ).DataTable( {
    'drawCallback': function () {
        $( 'table.import_list tbody tr td' ).css( 'padding', '5px 8px 5px 8px' );
    }
} )
于 2018-03-14T11:08:35.080 回答