Я создал таблицу html с динамическим добавлением строки. Я добавляю комбинацию строк из четырех строк, когда добавляю все четыре строки, я хочу нарисовать одну строку, потому что я показываю это другое поле. Вот так.
table.myTable {
border:1px solid black;
}
td {
border:none;
}
tr {
border:1px solid black;
}
$(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++;
}
<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>
Это мой код, помогите мне как рисовать линию, как это шоу на изображении.
Вы можете использовать <hr>
. Даже в дополнительном <tr>
после каждого прилагаемого <tr>
.
td {
border-bottom: 1px solid red;
}
tr:last-child td {
border-bottom: none;
}
вы не можете использовать границу для элемента TR, я думаю, что IE <8 не примет этого. Для разделения строк используйте что-то вроде
td {border-bottom: Xpx solid red} tr: last-child td {color: red; } }
Красная линия между trs:
table.myTable tr + tr td {
border-top: 2px solid red;
}