[javascript] how ti limit the additions field?

Question

Hi, If someone here is willing to help me I would really appreciate

how to limit the addition of columns in the following html code, let say only up to 5 only?

  <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="friends"
      <table width="100%" cellpadding="10" cellspacing="0" id="my_friends">
        <tr>
          <th colspan="2" style="text-align: center;"><?php echo $text_enter_friend; ?></th>
        </tr>
        <tr>
          <td class="left" width="30%"><span class="required">*</span> <?php echo $entry_friend; ?></td>
          <td class="left"><input type="text" name="friend" value="<?php echo $friend; ?>" size="30" maxlength="45" />
            <?php if ($error_friend) { ?>
            <span class="error"><?php echo $error_friend; ?></span>
            <?php } ?></td>
        </tr>
        <?php if ($friends) { ?>
        <?php foreach ($friends as $result) { ?>
        <tr>
          <td style="vertical-align: top;"><?php echo $entry_friend; ?></td>
          <td style="vertical-align: top;"><input type="text" name="friends[]" value="<?php echo $result; ?>" size="30" maxlength="45" /></td>
        </tr>
        <?php } ?>
        <?php } ?>
      </table>
      <table width="100%" cellpadding="10" cellspacing="0">
        <tr>
          <td></td>
          <td class="right"><a onclick="addFriend();" class="button"><span><?php echo $button_add_friend; ?></span></a><a onclick="removeFriend();" class="button"><span><?php echo $button_remove; ?></span></a></td>
        </tr>
        <tr>
          <td colspan="2" class="center">
            <p><?php echo $text_message; ?></p>
            <p><a onclick="$('#friends').submit();" class="button"><span><?php echo $button_submit; ?></span></a></p>
            <p><?php echo $text_addresses; ?></p>
          </td>
        </tr>
      </table>
    </div>
  </form>

<script type="text/javascript"><!--
function addFriend() {
    var tbl = document.getElementById('my_friends');
    var iteration = tbl.tBodies[0].rows.length;
    newRow = tbl.tBodies[0].insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = '<?php echo $entry_friend; ?>';
    var newCell1 = newRow.insertCell(1);
    var el = document.createElement('input');
    el.type = 'text';
    el.name = 'friends[]';
    el.size = 30;
    el.maxlength = 45;
    newCell1.appendChild(el);
//  if (newCell > 2) tbl.addCell(newCell + 1);
}

function removeFriend() {
    var tbl = document.getElementById('my_friends');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
//--></script>

Thanks in advance

Answer 1

The table#my_friends has by default 2 rows. So all what you have to count the rows.

function addFriend() {
var tbl = document.getElementById('my_friends');
var iteration = tbl.tBodies[0].rows.length;
if(iteration>=7)return;//leave the function if already 5 rows have been added

//rest of the function