JQuery 数据表行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12444423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Datatables row height
提问by Richard
I have a page where people can enter in first/last name, phone, email, and ethnicity click add and it adds an entry into the datatables. The problem is after clicking add the table shows up like this:
我有一个页面，人们可以在其中输入名字/姓氏、电话、电子邮件和种族，然后单击添加并将条目添加到数据表中。问题是点击添加后，表格显示如下：
How do I adjust the height of each row so that it shows up properly. This is my html code for the table:
如何调整每行的高度以使其正确显示。这是我的表格的 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>
Here is my jquery code
这是我的 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()] );
}
I have two questions really:
我真的有两个问题：
- How do I adjust the height properly so the user can see the data?
- If the enter in the information of 20 people, how do I take all that data so I can enter it into a mysql database?
- 如何正确调整高度以便用户可以看到数据？
- 如果输入 20 个人的信息，我如何将所有这些数据输入到 mysql 数据库中？
采纳答案by Nicola Peluchetti
As you can see in this fiddleyour code is correct and should work as expected.
正如你在这个小提琴中看到的，你的代码是正确的，应该按预期工作。
In any case to set a row height, simply use css
在任何情况下设置行高，只需使用 css
tr { height: 50px }
i think there is no need for it to be more complex.
我认为没有必要让它变得更复杂。
Regarding the question on how to insert the data into a db, there are tons of examples on google.
关于如何将数据插入数据库的问题，google上有很多例子。
回答by joe92
This is an old question, but if like me you don't want to do this in CSS you can use drawCallbackin 1.10 or higher to alter the table cell padding and/or height using JS.
这是一个老问题，但如果像我一样你不想在 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' );
}
} )
