Работа с таблицами

[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, у меня не выходит

[рони]

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

var tr_1???, tr_2???, tr_3 = "";

[Artur_Hopf]

рони,
Поправил

[рони]

Artur_Hopf,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  </script>
</head>

<body>
<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>
 </table>
<script>
 var tr_1 = "";
 var arr = [{
     arr1: "Зайка",
     arr2: "беляк",
     arr3: "3 штуки"
 }, {
     arr1: "Волчёк",
     arr2: "серый",
     arr3: "1 штука"
 }, {
     arr1: "Медвежек",
     arr2: "бурый",
     arr3: "1 штука"
 }];
 tr_1 += '<tr>' +
     '<td bgcolor="#b7b7b7" rowspan="' + (arr.length + 1) + '">' + '1' + '</td>' +
     '<td bgcolor="#c6c6c6" rowspan="' + (arr.length + 1) + '">' + 'Лесок' + '</td>' +
     '<td bgcolor="#b7b7b7">' + 'Зверьки ' + '</td>' +
     '<td bgcolor="#c6c6c6" colspan="2">' + ' ' + '</td>' +
     '</tr>';

 for (i = 0; i < arr.length; i++) {
     tr_1 += '<tr>' +
         '<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_1").innerHTML = tr_1;
</script>

</body>
</html>

[Artur_Hopf]

рони,
Спасибо, все получилось