Как переписать значения строк динамически созданной таблицы при нажатии кнопки, используя JavaScript

Question

Как переписать значения строк динамически созданной таблицы при нажатии кнопки, используя JavaScript

0

У меня есть раскрывающийся список, из которого пользователь может выбрать опцию "старый", "новый". В соответствии с выбранной опцией я запрашиваю данные из xml и отображаю их в таблице.

Html

<body>
<table id="NovelList" class="NovelList" border="1">
<tr>
<th>Novel Title</th>
<th>Author</th>
<th>Publishing Year</th>
<th>Price</th>
<th>Purchase</th>
</tr>
</table>

</body>

и для добавления данных в таблицу по выбору выберите, я делаю это: -

var nodes = xmlDoc.evaluate(pathExpr, xmlDoc, nsResolver, XPathResult.ANY_TYPE, null);
        var result = nodes.iterateNext();
        while (result) {
            var b= [];
            var d=result.childNodes;
            for(var i=0;i<d.length;i++){
                if(d[i].nodeType == 1){
                    b.push(d[i]);
                    }
                }
            for(var p=0;p<b.length;p++){
                    var n = b[p];
                    if (n.localName== "title"){var t = n.childNodes[0].nodeValue;}
                            if (n.localName== "author"){var a = n.childNodes[0].nodeValue;}
                            if (n.localName== "year"){var y = n.childNodes[0].nodeValue;}
                            if (n.localName== "price"){var pr = n.childNodes[0].nodeValue;}
                            if (n.localName== "code"){var c = n.childNodes[0].nodeValue;}

                    }
            $('.NovelList tr:last').after(
                    '<tr><td class="value">'+ t
                            + '</td><td class="value">'+ a
                            + '</td><td class="value">' + y
                            + '</td><td class="value">' + pr
                            + '</td><td class="chk"><input type="checkbox" name="chkbox" value='+'"'+c+'"'+'></td></tr>');
        result = nodes.iterateNext();
        }
    }

но поскольку я использую ".after", каждый раз, когда я выбираю параметр, он добавляется к уже отображенной таблице.

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

Niks 18 сен. 2013, в 14:02

Источник

Теги:

javascript

html

xml

xpath

2 ответа

0

Сначала отделите голову и тело так:

<table>
    <thead>
        <tr>...</tr>
    </thead>
    <tbody>
        <tr>...</tr>
    </tbody>
</table>

а затем позвоните

$('tbody').empty();

Это должно делать свое дело. В принципе, сначала нужно удалить DOM.

Fenixp 18 сен. 2013, в 10:33

0

Да, но так как метод empty () удаляет все дочерние узлы, первая строка таблицы, в которой также удалены заголовки и ничего не отображается.
Niks 18 сен. 2013, в 12:00
0

@neeti в этом случае, правильно разделите заголовок и тело - поместите заголовок в тег thead и тело в тег tbody. Тогда звоните пусто на теле. Отредактированный ответ.
Fenixp 18 сен. 2013, в 12:20

Ещё вопросы

Да, но так как метод empty () удаляет все дочерние узлы, первая строка таблицы, в которой также удалены заголовки и ничего не отображается.
@neeti в этом случае, правильно разделите заголовок и тело - поместите заголовок в тег thead и тело в тег tbody. Тогда звоните пусто на теле. Отредактированный ответ.

Niks · Accepted Answer · 2013-10-01T08-25-00.000Z

спасибо за помощь Fenixp. Я добавил тег заголовка и тела в таблицу, но затем также empty() не работал, поэтому я в конечном итоге использовал remove().

HTML файл после редактирования

<table id="NovelList" class="NovelList" border="1">
                    <thead>
                        <tr>
                            <th>Novel Title</th>
                            <th>Author</th>
                            <th>Publishing Year</th>
                            <th>Price</th>
                            <th>Purchase</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr></tr>
                    </tbody>
                </table>

Вызов этого перед добавлением row-

$('#NovelList tbody >tr.dtr').remove();

и добавление строки с использованием

$('.NovelList tbody tr:last').after(
                    '<tr class="dtr"><td class="value">'+ t[0].firstChild.nodeValue
                        + '</td><td class="value">'+ a[0].firstChild.nodeValue
                        + '</td><td class="value">' + y[0].firstChild.nodeValue
                        + '</td><td class="value">' + p[0].firstChild.nodeValue
                        + '</td><td class="chk"><input type="checkbox" name="chkbox" value='+'"'+code+'"'+'></td></tr>');