Динамическое добавление и изменение строки таблицы и индекса ее массива: перевод jQuery в JavaScript - PullRequest
Новая
       8

Динамическое добавление и изменение строки таблицы и индекса ее массива: перевод jQuery в JavaScript

0 голосов
/ 13 марта 2020

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

Функции, которые я писал в JS, на самом деле 1) moveup(ctext,cnum,tval,obj,n), 2) movedown(ctext,cnum,tval,obj,n) и 3) deleterow(ctext,cnum,tval,obj,n), однако, я все еще потерялся, чтобы реализовать их в JS.

Потому что я начинаю учиться JS.

Для функций addBasicData(ctext,tval) и checkTableForm(ctext,cnum,tval,obj,n,stype) я хотел бы улучшить его (если эти функции реализуют то, что я думаю).

4) реализовать план:

Когда вы нажмете кнопку «добавить строку», вы увидите, что «число» равно числу нажатий на кнопку, хотя вы «удаляете» строку и ее «содержимое».

Итак, я хотел бы Исправить это. Когда строка удаляется, ее задняя строка и данные берут свое «число» и индекс, за исключением ее «заголовка».

// пример таблицы № 1 начинается

Number │ Title ㅤ ㅤ │ ㅤ ㅤ ㅤ │ Настройка

1 │ │ ㅤ │ HTML ㅤ ㅤ ㅤ ㅤ ㅤ * * * *

2 ㅤ ㅤ ㅤ │ JAVASCRIPT ㅤ ㅤ │ * * *

3 │ ㅤ ㅤ │ CSS ㅤ ㅤ ㅤ ㅤ ㅤ ㅤ │ * * *

// пример таблицы № 1 заканчивается

// удалить JAVASCRIPT, добавить строку.

// пример таблицы № 2 начинается

Число │ Название ㅤ ㅤ ㅤ ㅤ ㅤ │ │ Настроить

1 ㅤ ㅤ ㅤ │ HTML ㅤ ㅤ ㅤ ㅤ ㅤ │ * * *

1039 * 3 Таблица №2 заканчивается

Было бы приятно, если бы кто-нибудь помог вам перевести jQuery код в JavaScript и решить вопрос 4). 

var num_rows=0;
var new_row_num=0;
function add_new_row(obj,n) {
    $("#num_rows").val(++num_rows);
    var tag = ""
    tag +="<tr bgcolor=\"#ffffff\" id=\"tr_id"+(new_row_num + n)+"\">\n";
    tag +="<td align=\"center\">"+((new_row_num + n) +1)+"</td>\n";
    tag +="<td>\n";
    tag +="<input type=\"hidden\" name=\"cma_num[]\" id=\"cma_num"+(new_row_num + n)+"\" value=\""+(new_row_num + n)+"\" />\n";
    tag +="<input type=\"text\" name=\"cma_text[]\" id=\"cma_text"+(new_row_num + n)+"\" value=\"content "+(new_row_num+1)+"\" />\n";
    tag +="</td>\n";
    tag +="</td>\n";
    tag +="<td>\n";
    tag +="<input type=\"button\" value=\"down\" onclick=\"movedown('cma_text[]','cma_num[]','cma_text_value','tr_id',"+(new_row_num + n)+");\" />\n";
    tag +="<input type=\"button\" value=\"up\" onclick=\"moveup('cma_text[]','cma_num[]','cma_text_value','tr_id',"+(new_row_num + n)+");\" />\n";
    tag +="<input type=\"button\" value=\"remove\" onclick=\"deleterow('cma_text[]','cma_num[]','cma_text_value','tr_id',"+(new_row_num + n)+");\" />\n";
    tag +="</td>\n";
    tag +="</tr>\n";
  
    $("#"+obj).append(tag);
    new_row_num++;
    addBasicData('cma_text[]','cma_text_value');
}
  
function moveup(ctext,cnum,tval,obj,n) {
    $("#"+obj+n).insertBefore($("#"+obj+n).prev());
    checkTableForm(ctext,cnum,tval,obj,n,'up');
}
  
function movedown(ctext,cnum,tval,obj,n) {
    $("#"+obj+n).insertAfter($("#"+obj+n).next());
    checkTableForm(ctext,cnum,tval,obj,n,'down');
}
  
function deleterow(ctext,cnum,tval,obj,n) {
    $("#"+obj+n).remove();
    $("#num_rows").val(--num_rows);
    addBasicData(ctext,tval);
}
  
function addBasicData(ctext,tval) {
    var i, tag=[];
    var tmp_text = document.getElementsByName(ctext);
    var tot = tmp_text.length;
    for (i = 0; i < tot; i++) {
        tag[i] = tmp_text[i].value;
    }
    document.getElementById(tval).value = tag.join(",");
}
  
function checkTableForm(ctext,cnum,tval,obj,n,stype) {
    var i, tag=[];
    var tmp_text = document.getElementsByName(ctext);
    var tmp_num = document.getElementsByName(cnum);
    var tot = tmp_text.length;
    tot = (stype == "delete") ? (tot-1) : tot;
    for (i = 0; i < tot; i++) {
        document.getElementById(obj+tmp_num[i].value).style.backgroundColor = "#fff";
        tag[i] = tmp_text[i].value;
    }
    document.getElementById(obj+n).style.backgroundColor = "#ffff80";
    document.getElementById(tval).value = tag.join(",");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table border="0" cellpadding="5" cellspacing="1" bgcolor="#CCCCCC" id="table_list">
    <thead>
        <tr bgcolor="#ffff8e">
            <th colspan="3" style="text-align:left;">
                <input type="text" name="cma_text_value" id="cma_text_value" value="" size="40" readonly="readonly" />
                &nbsp;
                <button type="button" id="btn-add-row" onclick="add_new_row('table_list',0);">Add Row</button>
            </th>
        </tr>
        <tr bgcolor="#f5f5f5">
            <th>Number</th>
            <th>Title</th>
            <th>Adjust</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
...