在删除之前将第二个 <td> 的值存储为逗号分隔

Question

我有一个 table 有 2 个 <td>，一个有一个复选框，另一个有一个值：

我的table如下：

<table border="1" id="table_sundry">
    <tr>
        <td><input type="checkbox" id="chk_1"></td>
             <td id="val1">a</td>
    </tr>
        <tr>
        <td><input type="checkbox" id="chk_2"></td>
             <td id="val2">b</td>
    </tr>
            <tr>
        <td><input type="checkbox" id="chk_3"></td>
             <td id="val3">c</td>
    </tr>
                  <tr>
        <td><input type="checkbox" id="chk_4"></td>
             <td id="val4">d</td>
    </tr>
                        <tr>
        <td><input type="checkbox" id="chk_5"></td>
             <td id="val3">e</td>
    </tr>
</table>
                      <input type="button" id="btn_del" value="deleterow">

检查特定行后，我有一个删除行的按钮。

在delete中我做的是这样的：

$("#btn_del").click(function(){ 
   var checked = $("#table_sundry tr input:checked").size();
    var total = $("#table_sundry tr").size()-1; 
    var rowcnt =  document.getElementById("table_sundry").rows.length-1;  

    var flag = 0;
    if($("#chk_"+rowcnt).prop('checked') == true){ //if delete contains last row
        $("#table_sundry tr input:checked").parents('tr').remove();

         flag =1;
        //updateRowCount(flag);
    }
    else{ 
            $("#table_sundry tr input:checked").parents('tr').remove();
            //updateRowCount(flag);
        }
});

我需要将第二列的值存储为逗号分隔。假设如果我删除第一列和最后一列，我应该在变量中得到 a,e。

参考 fiddle : FIDDLE

Answer 1

通过进行小的更改，您将实现此目标

<table border="1" id="table_sundry">
    <tr>
         <td><input type="checkbox" value='a' id="chk_1"></td>
         <td id="val1">a</td>
    </tr>
    <tr>
         <td><input type="checkbox" value='b' id="chk_2"></td>
         <td id="val2">b</td>
    </tr>
        <tr>
         <td><input type="checkbox" value='c' id="chk_3"></td>
         <td id="val3">c</td>
    </tr>
              <tr>
      <td><input type="checkbox" value='d' id="chk_4"></td>
         <td id="val4">d</td>
</tr>
                    <tr>
    <td><input type="checkbox" value='e' id="chk_5"></td>
         <td id="val3">e</td>
</tr>

和jquery这样

    $(document).ready(function(){

    $("#btn_del").click(function(){ 
        var checked = $("#table_sundry tr input:checked").size();
        var total = $("#table_sundry tr").size()-1; 
        var values="";
        var rowcnt =  document.getElementById("table_sundry").rows.length-1;  

        var flag = 0;
        if($("#chk_"+rowcnt).prop('checked') == true){ //if delete contains last row
           console.log("ëe"+ $("#chk_"+rowcnt).prop('value'));
            $("#table_sundry tr input:checked").parents('tr').remove();

             flag =1;
            //updateRowCount(flag);
        }
        else{
            var vals=$("#table_sundry tr input:checked");
            for(var i=0;i<vals.length;i++){

                if(i>0)
                    values+=",";
                values+=vals[i].value;
            }
            console.log(values);
                $("#table_sundry tr input:checked").parents('tr').remove();
                //updateRowCount(flag);
            }
    });
});

在值变量中包含逗号分隔值

Answer 2

JS Fiddle: https://jsfiddle.net/7ft6qtja/2/

HTML

<table border="1" id="table_sundry">
    <tr>
        <td><input type="checkbox" id="chk_1"></td>
             <td id="val1">a</td>
    </tr>
        <tr>
        <td><input type="checkbox" id="chk_2"></td>
             <td id="val2">b</td>
    </tr>
            <tr>
        <td><input type="checkbox" id="chk_3"></td>
             <td id="val3">c</td>
    </tr>
                  <tr>
        <td><input type="checkbox" id="chk_4"></td>
             <td id="val4">d</td>
    </tr>
                        <tr>
        <td><input type="checkbox" id="chk_5"></td>
             <td id="val3">e</td>
    </tr>
</table>
                      <input type="button" id="btn_del" value="deleterow">

JavaScript

var values = [];
var csv = ""; // Store Comma separated values in this variable;

$(document).ready(function(){

  $("#btn_del").click(function(){ 

    var checkboxes = $("#table_sundry tr input:checked");

    if (checkboxes.length > 0) { 

      $.each(checkboxes, function (index, checkbox) {

        var tr = $(checkbox).closest("tr");

        var value = tr.find("td:eq(1)").html();

        values.push(value);

        csv = values.join();

        tr.remove();

      });

      alert(csv);

    }
    else {

      alert("Please select an item.");

    }

  });

});

Answer 3

我们也可以用这个解决

 var value=[];
               var allValue;
               $('#btn_del').click(function (){
                   $("table tr :checkbox:checked").each(function (){
                     var attrValue=$(this).closest('tr').find("td:eq(1)").attr('id') ;
                     console.log('value is'+attrValue);
                     value.push($('#'+attrValue).html());
                     allValue=value.join();
                     alert('Values Are'+allValue);
                     if($(this).closest('tr').length>0){
                         $(this).closest('tr').remove();
                     }

                  });

在删除之前将第二个 <td> 的值存储为逗号分隔

Storing values of second <td>'s as comma separated just before deletion

jquery

html-table

delete-row