Как передать значение поля ввода и отобразить его в ячейке строки таблицы html?

Question

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

это мой jquery-код для ввода статического значения из ячейки строки внутри полей ввода // получения текстовых значений строки и помещения внутрь поля ввода

$("#cases tbody").on('click', 'tr', function () {
    //get row contents into an array
    var rowData = $(this).children("td").map(function () {
       return $(this).text();

    }).get();
    $("#DepartmentCase").val(rowData[0]);
    $("#Department").val(rowData[1]);
    $("#Charge").val(rowData[2]);
    $("#LabCase").val(rowData[3]);
    $("#IncidentReportDate").val(rowData[4]).datepicker({
        changeMonth: true,
        changeYear: true
    });
});

и после того, как значение внутриполе ввода, теперь я хочу отредактировать значение и заменить существующее значение ячейки therow.пример: (исходное значение) case case #: 1 -> (отредактированное значение) case case #: 2. но у меня возникают трудности с передачей значения внутри поля ввода обратно в ячейку строки, что мне делать?

Это мой код jquery для получения значения из полей ввода и замены обратно в ячейку строки.

var Data = $(this).children("td").map(function () {

    }).html();
    $("#Data[0]").val($('input:text').val());
    $("#Data[1]").html('$(Department).val()');
    $("#Data[2]").html('$(Charge).val()');
    $("#Data[3]").html('$(LabCase).val()');
    $("#Data[4]").html('$(#IncidentReportDate).val()').datepicker({
        changeMonth: true,
        changeYear: true
    });

});

Answer 1

Вы делаете это неправильно.Вы присваиваете значения в массиве Data.Вот один из способов замены текста с помощью селектора.

<table id="cases"> 
    <tr> 
        <th>Department Case #</th> 
        <th>Department</th> 
        <th>Charge</th> 
        <th>Lab Case #</th> 
        <th>Incident Report Date</th>
    </tr>
    <tr>
        <td class="case">133333</td>
        <td class="department">Forti-Palmade</td>
        <td class=charge"">Illegal Dumping</td>
        <td class="lab-case">10-123456</td>
        <td class="date">05/03/2011</td>
    </tr>
</table>

$("#cases tbody").on('click', 'tr', function () {
    //get row contents into an array
    var rowData = $(this).children("td").map(function () {
       return $(this).text();

    }).get();
    $("#DepartmentCase").val(rowData[0]);
    $("#Department").val(rowData[1]);
    $("#Charge").val(rowData[2]);
    $("#LabCase").val(rowData[3]);
    $("#IncidentReportDate").val(rowData[4]).datepicker({
        changeMonth: true,
        changeYear: true
    });
});

$(document).on('click', '#rplaceButton', function () {
    $(".case", this).text($('#DepartmentCase').val());
    $(".department", this).text($('#Department').val());
    $(".charge", this).text($('#Charge').val());
    $(".lab-case", this).text($('#LabCase').val());
    $(".date", this).text($('#IncidentReportDate').val()).datepicker({
        changeMonth: true,
        changeYear: true
    });
});