Добавить строку в таблицу

[feztik]

Всем доброго времени суток. Только начал изучать JS, поэтому строго прошу не судить
Есть таблица, и в ней есть кнопка "добавить строку", работать всё работает, но можно ли это сделать как-нибудь короче? Если да, то подскажите как, или подскажите что почитать. Заранее спасибо

<table align="center" id="my_table">
    	<tr>
        	<td> </td>
            <td> </td>
            <td id="table_border">Параметр </td>
            <td id="table_border">Сравнение </td>
            <td id="table_border">Значение </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr id="new_tr">
        	<td><input id="button_and_or" class="button" type="button" onclick="click_and_or()"/> </td>
            <td><input id="button_open_bracket" class="button" type="button" onclick="click_open_breacket()"/> </td>
            <td>
            	<select>
                	<option>Parametr</option>
                </select>
            </td>
            <td>
            	<select>
                	<option>Sravnenie</option>
                </select>
            </td>
            <td><input id="text_area" type="text" size="30" /></td>
            <td><input id="button_close_bracket" class="button" type="button" onclick="click_close_bracket()"/> </td>
            <td><input id="button_add_tr" class="button" type="button" onclick="click_add_tr()"/> </td>
            <td><input id="button_del_tr" class="button" type="button" onclick="click_del_tr()"/> </td>
        </tr>
    </table>

function click_add_tr()
{
var new_tr=document.createElement('tr');
new_tr.innerHTML=document.getElementById('my_table').getElementsByTagName('tr').length+'\
<input id="button_and_or" class="button" type="button" onclick="click_and_or()"/>\
<td><input id="button_open_bracket" class="button" type="button" onclick="click_open_breacket()"/> </td>\
<td>\
<select>\
<option>Parametr</option>\
</select>\
</td>\
<td>\
<select>\
<option>Sravnenie</option>\
</select>\
<td><input id="text_area" type="text" size="30" /></td>\
<td><input id="button_close_bracket" class="button" type="button" onclick="click_close_bracket()"/> </td>\
<td><input id="button_add_tr" class="button" type="button" onclick="click_add_tr()"/> </td>\
<td><input id="button_del_tr" class="button" type="button" onclick="click_del_tr()"/> </td>';
document.getElementById('my_table').appendChild(new_tr);

[Zuenf]

Можно скопировать уже существующую строку, но в этом случае лучше использовать класс для доступа к элементу, т.к. не придется каждому элементу выставлять разные id.

<table align="center" id="my_table">
    	<tr>
        	<td> </td>
            <td> </td>
            <td id="table_border">Параметр </td>
            <td id="table_border">Сравнение </td>
            <td id="table_border">Значение </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
        <tr class="new_tr">
        	<td><input id="button_and_or" class="button" type="button" onclick="click_and_or()"/> </td>
            <td><input id="button_open_bracket" class="button" type="button" onclick="click_open_breacket()"/> </td>
            <td>
            	<select>
                	<option>Parametr</option>
                </select>
            </td>
            <td>
            	<select>
                	<option>Sravnenie</option>
                </select>
            </td>
            <td><input id="text_area" type="text" size="30" /></td>
            <td><input id="button_close_bracket" class="button" type="button" onclick="click_close_bracket()"/> </td>
            <td><input id="button_add_tr" class="button" type="button" onclick="click_add_tr()"/> </td>
            <td><input id="button_del_tr" class="button" type="button" onclick="click_del_tr()"/> </td>
        </tr>
    </table>

function click_add_tr()
{
var new_tr = document.querySelector('.new_tr').cloneNode(true);
document.getElementById('my_table').appendChild(new_tr);
}

[feztik]

Спасибо большое