[Artur_Hopf]

Добрый день. У меня есть таблица вида:

<table>
    <thead>
       <tr>
       <td bgcolor="#b7b7b7">№</td>
       <td bgcolor="#c6c6c6">Обитание</td>
       <td bgcolor="#c6c6c6">Вид</td>
       <td bgcolor="#b7b7b7">Цвет</td>
       <td bgcolor="#c6c6c6">Количество</td>
       </tr>
     </thead>
     <tbody id="table_1"></tbody>
     <tbody id="table_2"></tbody>
</table>
<script type="text/javascript">
  var tr_1 = "", tr_2 = "", tr_3 = "";
  var arr = [{arr1:"Зайка", arr2:"беляк", arr3:"3 штуки"}, {arr1:"Волчёк", arr2:"серый", arr3:"1 штука"}, {arr1:"Медвежек", arr2:"бурый", arr3:"1 штука"}];
    tr_1 += '<tr>' +
         '<td bgcolor="#b7b7b7">' + '1' + '</td>' +
         '<td bgcolor="#c6c6c6">' + 'Лесок' + '</td>' + 
         '<td bgcolor="#b7b7b7">' + 'Зверьки ' + '</td>' + 
         '<td bgcolor="#c6c6c6" colspan="2">' + ' ' + '</td>' + 
           '</tr>';
document.getElementById("table_1").innerHTML = tr_1;
   for (i = 0; i < arr.length; i++){
                        tr_2 += '<tr>' +
                        '<td bgcolor="#b7b7b7">' + '' + '</td>' +  
                        '<td bgcolor="#b7b7b7">' + '' + '</td>' +
                        '<td bgcolor="#b7b7b7">' + arr[i].arr1 + '</td>' +
                        '<td bgcolor="#c6c6c6">' + arr[i].arr2 + '</td>' +
                        '<td bgcolor="#b7b7b7">' + arr[i].arr3 + '</td>' +
                        '</tr>';
    };
 document.getElementById("table_2").innerHTML = tr_2;
</script>

Можно ли привести это к такому виду:

<table>
            <thead>
                <tr>
                    <td bgcolor="#b7b7b7">№</td>
                    <td bgcolor="#c6c6c6">Обитание</td>
                    <td bgcolor="#c6c6c6">Вид</td>
                    <td bgcolor="#b7b7b7">Цвет</td>
                    <td bgcolor="#c6c6c6">Количество</td>
                </tr>
            </thead>
            <tbody id="table_1"></tbody>
            <tbody id="table_3"></tbody>
</table>
<script type="text/javascript">
            var tr_1, tr_2, tr_3 = "";
            var arr = [{arr1:"Зайка", arr2:"беляк", arr3:"3 штуки"}, {arr1:"Волчёк", arr2:"серый", arr3:"1 штука"}, {arr1:"Медвежек", arr2:"бурый", arr3:"1 штука"}];
            tr_3 += '<tr>' +
                        '<td bgcolor="#b7b7b7" rowspan="4">' + '1' + '</td>' +
                        '<td bgcolor="#c6c6c6" rowspan="4">' + 'Лесок' + '</td>' + 
                        '<td bgcolor="#b7b7b7">' + 'Зверьки ' + '</td>' + 
                        '<td bgcolor="#c6c6c6" colspan="2">' + ' ' + '</td>' + 
                        '</tr>'+
                        '<tr>' +
                        '<td bgcolor="#b7b7b7">' + 'Зайка' + '</td>' + 
                        '<td bgcolor="#c6c6c6">' + 'беляк' + '</td>' + 
                        '<td bgcolor="#c6c6c6">' + '3 штуки' + '</td>' + 
                        '</tr>'+
                        '<tr>' +
                        '<td bgcolor="#b7b7b7">' + 'Волчёк' + '</td>' + 
                        '<td bgcolor="#c6c6c6">' + 'серый' + '</td>' + 
                        '<td bgcolor="#c6c6c6">' + '1 штука' + '</td>' + 
                        '</tr>'+
                        '<tr>' +
                        '<td bgcolor="#b7b7b7">' + 'Медвежек' + '</td>' + 
                        '<td bgcolor="#c6c6c6">' + 'бурый' + '</td>' + 
                        '<td bgcolor="#c6c6c6">' + '1 штука' + '</td>' + 
                        '</tr>';
document.getElementById("table_3").innerHTML = tr_3;
</script>

Только в массиве arr может быть множество наименований, то есть rowspan = arr.length. У меня не получилось, таблицы в массиве съезжают и получается такой вот вид:

<table>
    <thead>
       <tr>
       <td bgcolor="#b7b7b7">№</td>
       <td bgcolor="#c6c6c6">Обитание</td>
       <td bgcolor="#c6c6c6">Вид</td>
       <td bgcolor="#b7b7b7">Цвет</td>
       <td bgcolor="#c6c6c6">Количество</td>
       </tr>
     </thead>
     <tbody id="table_1"></tbody>
     <tbody id="table_2"></tbody>
</table>
<script type="text/javascript">
  var tr_1 = "", tr_2 = "", tr_3 = "";
  var arr = [{arr1:"Зайка", arr2:"беляк", arr3:"3 штуки"}, {arr1:"Волчёк", arr2:"серый", arr3:"1 штука"}, {arr1:"Медвежек", arr2:"бурый", arr3:"1 штука"}];
    tr_1 += '<tr>' +
         '<td bgcolor="#b7b7b7">' + '1' + '</td>' +
         '<td bgcolor="#c6c6c6">' + 'Лесок' + '</td>' + 
         '<td bgcolor="#b7b7b7">' + 'Зверьки ' + '</td>' + 
         '<td bgcolor="#c6c6c6" colspan="2">' + ' ' + '</td>' + 
           '</tr>';
document.getElementById("table_1").innerHTML = tr_1;
    for (i = 0; i < arr.length; i++){
                        tr_2 += '<tr>' +
                        '<td bgcolor="#b7b7b7" rowspan ="'+arr.length+'">' + '' + '</td>' +  
                        '<td bgcolor="#b7b7b7" rowspan ="'+arr.length+'">' + '' + '</td>' +
                        '<td bgcolor="#b7b7b7">' + arr[i].arr1 + '</td>' +
                        '<td bgcolor="#c6c6c6">' + arr[i].arr2 + '</td>' +
                        '<td bgcolor="#b7b7b7">' + arr[i].arr3 + '</td>' +
                        '</tr>';
     };
document.getElementById("table_2").innerHTML = tr_2;
</script>

Не знаю откуда между строк берется undefined, у меня не выходит