在html表中的两个字段之间画线?
Posted
技术标签:
【中文标题】在html表中的两个字段之间画线?【英文标题】:Draw line between two field in html table? 【发布时间】:2013-10-08 18:57:36 【问题描述】:我已经创建了带有动态行添加的 html 表。当添加所有四行时,我添加了四行的行组合,我想画一条线,因为我显示了不同的字段。像这样
CSS
table.myTable
border:1px solid black;
td
border:none;
tr
border:1px solid black;
javascript & jQuery
>$(document).ready(function ()
$('#id_checkbox').bind('click', function (event)
alert('Hi there!');
);
);
var indexValue = 0;
function addRow()
var htmlText = $("#mainHead").html();
var test = '<tr id=' + indexValue + ' ><td align="center" rowspan="4" style="width: 30px;"><input type="checkbox" name="delete" id="id_checkbox" onclick="changeDelete(this)"></td></tr><tr id=' + indexValue + ' ><td> <select name="opt#ID#" required="required" id="opt#ID#" onchange="javascript:SelectItem(this.value,id);" style="width: 175px;"><option value="">----Select Tablet----</option></select><label style="width: 100px;"> Brand: </label><input id="CompanyName#ID#"></td><td style="width: 110px;"><label>Days: </label><input type="text" name="Days#ID#" id="Days#ID#" style="width: 50px;"></td><td><label>Qauntity: </label><input type="text" name="Qauntity#ID#" id="Qauntity#ID#" style="width: 50px;"></td></tr><tr id=' + indexValue + ' ><td colspan="2"> <label>Generic: </label><input type="text" name="Generic#ID#" id="Generic#ID#" style="width: 400px;" readonly=""></td><td ><label>Dosage: </label><input type="text" name="Dosage#ID#" id="Dosage#ID#" style="width: 140px;"></td></tr><tr id=' + indexValue + ' ><td style="width: 400px;" colspan="2"> <label>Info: </label><input type="text" name="Info#ID#" id="Info#ID#" readonly="" style="width: 400px;"></td><td colspan="2"><label>DosageInfo: </label><input type="text" name="DosageInfo#ID#" id="DosageInfo#ID#" style="width: 140px;" readonly=""></td></tr>';
test = test.replace(/#ID#/g, indexValue);
$("#applyTable").append(test);
indexValue++;
HTML
<div id="addNewRow" style="display:none">
<table>
<tbody id="mainHead">
<tr id="OnewRow">
<td>
<input type="checkbox" name="Delete" id="id_checkbox" onclick="changeDelete()" value="this" />
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table class="myTable" border="1px" align="center" style="width:800px;">
<tbody id="applyTable"></tbody>
</table>
</div>
<div align="center">
<input type="button" value="Add" onclick="addRow()" />
<br/>
<br/>
</div>
这是我的代码,帮助我如何在图像中画出这样的线条。
【问题讨论】:
Aaaa 什么不起作用? 请提供小提琴。 附加行中有很多重复的id
值 - 这是无效的。
@Virus721 我的整个代码都是工作 gud 但我怎样才能画出这条线。你显示图像并回答我
此时谷歌翻译不会更难阅读......
【参考方案1】:
td
border-bottom: 1px solid red;
tr:last-child td
border-bottom: none;
document.querySelector('#button').addEventListener('click', (e) =>
document.querySelector('table tbody').insertAdjacentHTML('beforeend', '<tr><td>Table cell</td><td>Table cell</td></tr>');
)
td
padding: 20px;
border-bottom: 1px solid red;
tr:last-child td
border-bottom: none;
<button type="button" id="button">Click to add row</button>
<table cellspacing="0">
<tr>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</table>
【讨论】:
【参考方案2】:TR 元素不能使用边框,我认为 IE
td 边框底部:Xpx 纯红色 tr:last-child td 颜色: 红色;
【讨论】:
【参考方案3】:trs之间的红线:
table.myTable tr + tr td
border-top: 2px solid red;
【讨论】:
:not(:last-child) 看起来更直观。 我认为这更多的是品味问题 :)【参考方案4】:您可以使用<hr>
标签。
即使在每个附加的<tr>
之后附加一个<tr>
。
【讨论】:
以上是关于在html表中的两个字段之间画线?的主要内容,如果未能解决你的问题,请参考以下文章