Как добавить строку динамически в HTML с помощью JavaScript - PullRequest
Новая
       4

Как добавить строку динамически в HTML с помощью JavaScript

1 голос
/ 02 сентября 2010

У меня есть задача, где мне нужно динамически добавить строку таблицы в HTML, где каждая строка имеет 2 текстовых поля, а последний элемент - это гиперссылка.Однако, когда я добавляю строку, гиперссылка последнего элемента должна быть заменена тегом <input>.Как это можно сделать?Я

Я могу добавить строку, но не могу изменить последний элемент на тег <input>, вот мой код:

HTML-файл 

<html>
<head>
<title>Add row</title>
<script language=javascript type=text/javascript src="multiplerows.js"></script>
</head>
<body>
<table id="CPTbl">
<tr>
<td>
   <input type="text" name="cpName" value="">
</td>
<td>
   <input type="text" name="cpName1" value="">
</td>
<td>
          <a href="samle.htm" View Image</a>
</td>
</tr>
<tr>
 <td>
<input type="button" value="AddRow" name="AddRowData" onClick="add('CPTbl',1)">
<input type="button" value="Delete Row" name="DeleteAgencyCp" onClick="remove('CPTbl',1);">
 </td>
</tr>
</table>
</form></body></html>

Мой скрипт такой, как показано ниже 

function add(TableId,replicaterow){
    var oMyTable = document.getElementById(TableId);
    var oNewRow;

      if (oMyTable.rows[replicaterow].style.display=="none"){
      if(oMyTable.rows.length==(replicaterow+1)){
          oMyTable.rows[replicaterow].style.display="";
      }else{

        oNewRow = oMyTable.rows[replicaterow].cloneNode(true);
        oNewRow.style.display=""
        ReInitRow(oNewRow,oMyTable.rows.length);
        oMyTable.tBodies[0].appendChild(oNewRow);
      }
      }else{
    oNewRow = oMyTable.rows[replicaterow].cloneNode(true);
    ReInitRow(oNewRow,oMyTable.rows.length);
    oMyTable.tBodies[0].appendChild(oNewRow);
    }       
}

function ReInitRow(oNewRow,rowlength){
  var flg=true;
  if (! oNewRow){return;}
  for (var i = 0 ; i < oNewRow.childNodes.length ; i++){
    if((oNewRow.childNodes[i].tagName == "INPUT") ||
    (oNewRow.childNodes[i].tagName == "SELECT") ||
    (oNewRow.childNodes[i].tagName == "TEXTAREA") ||
    (oNewRow.childNodes[i].tagName == "textarea"))
    {
    oNewRow.childNodes[i].name = oNewRow.childNodes[i].name;
    if((oNewRow.childNodes[i].tagName == "INPUT") &&
        (oNewRow.childNodes[i].type == "text") ||
        (oNewRow.childNodes[i].tagName == "TEXTAREA"))
    {
        oNewRow.childNodes[i].value = "";
    }
    if(oNewRow.childNodes[i].tagName == "SELECT" && !oNewRow.childNodes[i].multiple ){
        oNewRow.childNodes[i].selectedIndex=0;
    }
    if(oNewRow.childNodes[i].id == "resetList")
    {
    oNewRow.childNodes[i].options.length=0;
    }
    if((oNewRow.childNodes[i].type=="hidden")){
        flg=false;
        oNewRow.childNodes[i].value="0";
    }
    }
    ReInitRow(oNewRow.childNodes[i],rowlength);
  }
}

Как заменить данные третьей таблицы (<a href="samle.htm" View Image</a>) на <input type="file" name="photo" value="">?

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 02 сентября 2010

это довольно тупой способ приблизиться к нему, но у вас нет идентификаторов для чего-либо, что могло бы помочь. 

        ...
        if (!oNewRow) { return; }

        if (oNewRow.tagName == 'TD') {

            var anchors = oNewRow.getElementsByTagName('a');

            if (anchors.length > 0) {
                // found your hyperlink 
                oNewRow.removeChild(anchors[0]); // assuming there's only the one link

                var fi = document.createElement('input');
                fi.type = 'file';
                fi.name = 'photo';
                oNewRow.appendChild(fi);
            }
        }

        for (var i = 0; i < oNewRow.childNodes.length; i++) {
        ...

также ваш код настроен для клонирования строки кнопок. строка с входными данными и гиперссылкой - это строка 0, а не строка 1, по крайней мере, в IE. Вы можете найти более надежный способ получения ссылок на строки в своем коде.

0 голосов
/ 02 сентября 2010

@ Apache - введите свой оригинальный код HTML: 

<a href="samle.htm" View Image</a>

Должно быть: 

<a href="samle.htm">View Image</a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...