I have create html table with dynamically row add. I add row bine of four row when add all four row , i want draw one line because i show that different field. Like this.

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>&nbsp;&nbsp;<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;">&nbsp;&nbsp;Brand:&nbsp;&nbsp;</label><input id="CompanyName#ID#"></td><td style="width: 110px;"><label>Days:&nbsp;&nbsp;</label><input type="text" name="Days#ID#" id="Days#ID#" style="width: 50px;"></td><td><label>Qauntity:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" name="Qauntity#ID#" id="Qauntity#ID#" style="width: 50px;"></td></tr><tr id=' + indexValue + ' ><td colspan="2">&nbsp;&nbsp;<label>Generic:&nbsp;&nbsp;</label><input type="text" name="Generic#ID#" id="Generic#ID#" style="width: 400px;" readonly=""></td><td ><label>Dosage:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" name="Dosage#ID#" id="Dosage#ID#" style="width: 140px;"></td></tr><tr id=' + indexValue + ' ><td style="width: 400px;" colspan="2">&nbsp;&nbsp;<label>Info:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" name="Info#ID#" id="Info#ID#" readonly="" style="width: 400px;"></td><td colspan="2"><label>DosageInfo:&nbsp;&nbsp;&nbsp;&nbsp;</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>

This is my code help me how to draw line like this show in image.

I have create html table with dynamically row add. I add row bine of four row when add all four row , i want draw one line because i show that different field. Like this.

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>&nbsp;&nbsp;<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;">&nbsp;&nbsp;Brand:&nbsp;&nbsp;</label><input id="CompanyName#ID#"></td><td style="width: 110px;"><label>Days:&nbsp;&nbsp;</label><input type="text" name="Days#ID#" id="Days#ID#" style="width: 50px;"></td><td><label>Qauntity:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" name="Qauntity#ID#" id="Qauntity#ID#" style="width: 50px;"></td></tr><tr id=' + indexValue + ' ><td colspan="2">&nbsp;&nbsp;<label>Generic:&nbsp;&nbsp;</label><input type="text" name="Generic#ID#" id="Generic#ID#" style="width: 400px;" readonly=""></td><td ><label>Dosage:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" name="Dosage#ID#" id="Dosage#ID#" style="width: 140px;"></td></tr><tr id=' + indexValue + ' ><td style="width: 400px;" colspan="2">&nbsp;&nbsp;<label>Info:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><input type="text" name="Info#ID#" id="Info#ID#" readonly="" style="width: 400px;"></td><td colspan="2"><label>DosageInfo:&nbsp;&nbsp;&nbsp;&nbsp;</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>

This is my code help me how to draw line like this show in image.

• javascript
• jquery
• html
• css
• html-table

• 2 Aaaaand what isn't working ? – Virus721 Commented Oct 2, 2013 at 11:49
• Please provide a fiddle. – Gurminder Singh Commented Oct 2, 2013 at 11:50
• 1 You have a lot of repeated id values in the appended rows - this is invalid. – Rory McCrossan Commented Oct 2, 2013 at 11:50
• @Virus721 my whole code is work gud but how can i draw line that ask. u show image and give answer me – Iren Patel Commented Oct 2, 2013 at 11:53
• At this point google translate wouldn't be harder to read... – Virus721 Commented Oct 2, 2013 at 11:54

4 Answers 4

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>

You can use a <hr> tag. Even in an additional <tr> after every appended <tr>.

Red line between trs:

table.myTable tr + tr td {
    border-top: 2px solid red;
}

you can't use border for TR element, i think IE < 8 will not accept this. To separate rows use something like

td { border-bottom: Xpx solid red} tr:last-child td { color: red; }